我现在有两个盒子,一个盒子是红色的,当我的鼠标悬停在它上面时,盒子变成红色。另一个盒子是蓝色的,当我的鼠标悬停在它上面时,盒子变成蓝色。
我希望发生的是,当我的鼠标悬停在框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>
2条答案
按热度按时间svmlkihl1#
可以在鼠标悬停和鼠标移出时切换两个对象上的单个类。
svdrlsy42#
您有两个选择:
1.有一个 Package
outlineOne
和outlineTwo
的div,上面有一个:hover
选择器,这样就不需要JavaScript了(就像示例中的parent
div)1.添加一个CSS类,而不是通过JavaScript添加
:hover
(类似于.outlineOne.addedClass { background: blue; }
),并在JavaScript中侦听mouseover
事件。从技术上讲,您不应该手动将
:hover
添加到元素中,因为它是一个应该由用户激活的可信事件。