如何在使用JavaScript激活：hover伪元素后更改CSS元素的内容？

egmofgnx 于 2023-01-07 发布在 Java

关注(0)|答案(2)|浏览(124)

我现在有两个盒子，一个盒子是红色的，当我的鼠标悬停在它上面时，盒子变成红色。另一个盒子是蓝色的，当我的鼠标悬停在它上面时，盒子变成蓝色。
我希望发生的是，当我的鼠标悬停在框1的方块变成蓝色和框2变成红色。（同样的想法与框2，但切换颜色
这是我已经尝试过的代码，我知道问题出在JavaScript上，但我不明白JavaScript为什么不工作

const outlineOne = document.querySelector('.outlineOne');
const outlineOneHover = window.getComputedStyle(outlineOne, ':hover');
const outlineTwo = document.getElementsByClassName('outlineTwo')
if (outlineOneHover.style.background = blue) {
  outlineTwo[0].style.backgroundColor = 'red';
};

body {
  background: #2F2F2F
}

.outlineOne,
.outlineTwo {
  display: inline-block;
  background: #2F2F2F;
  width: 100px;
  height: 100px;
  border: 2px solid black;
  margin: 20px 20px;
}

.outlineTwo {
  background: blue;
}

.outlineOne {
  background: red;
}

.outlineOne:hover {
  background: blue;
}

.outlineTwo:hover {
  background: red;
}

<div class='parent'>
  <div class="outlineOne"></div>
  <div class="outlineTwo"></div>
</div>

JavaScript

来源：https://stackoverflow.com/questions/75034498/how-do-i-change-the-contents-of-a-css-element-after-a-hover-pseudo-element-acti

2条答案

按热度按时间

svmlkihl1#

可以在鼠标悬停和鼠标移出时切换两个对象上的单个类。

const outlineOne = document.querySelector('.outlineOne');
const outlineTwo = document.querySelector('.outlineTwo');

function changeBG(){
    outlineOne.classList.toggle("active");
    outlineTwo.classList.toggle("active");
}

outlineOne.addEventListener("mouseover",changeBG);
outlineTwo.addEventListener("mouseover",changeBG);

outlineOne.addEventListener("mouseout",changeBG);
outlineTwo.addEventListener("mouseout",changeBG);

body {
  background: #2F2F2F
}

.outlineOne,
.outlineTwo {
  display: inline-block;
  background: #2F2F2F;
  width: 100px;
  height: 100px;
  border: 2px solid black;
  margin: 20px 20px;
}

.outlineTwo {
  background: blue;
}

.outlineOne {
  background: red;
}

.outlineOne.active {
  background: blue;
}

.outlineTwo.active {
  background: red;
}

<div class='parent'>
  <div class="outlineOne"></div>
  <div class="outlineTwo"></div>
</div>

赞(0）回复(0）举报 2023-01-07

svdrlsy42#

您有两个选择：
1.有一个 Package outlineOne和outlineTwo的div，上面有一个:hover选择器，这样就不需要JavaScript了（就像示例中的parent div）

.parent:hover .outlineOne {
    background: blue;
}

.parent:hover .outlineTwo {
    background: red;
}

1.添加一个CSS类，而不是通过JavaScript添加:hover（类似于.outlineOne.addedClass { background: blue; }），并在JavaScript中侦听mouseover事件。
从技术上讲，您不应该手动将:hover添加到元素中，因为它是一个应该由用户激活的可信事件。

赞(0）回复(0）举报 2023-01-07

我来回答

如何在使用JavaScript激活：hover伪元素后更改CSS元素的内容？

2条答案

相关问题

热门标签

最新问答