html - CSS 将鼠标悬停在某物上并有一个完全不同的 div 更改其属性

Question

我试图编写一个代码，你将鼠标悬停在一个 div 上并让一个完全不同的 div 改变它的效果

这是我的代码

html

    <div class="a">LOREM IPSUM</div>
    <div class="boxhighlight"></div>

css

    .a:hover, .boxhighlight
    {
        background-color:black;
    }

我想要发生的是，当用户将鼠标悬停在单词 lorem ipsum 上时，div boxhighlight 将改变其背景颜色

有没有办法做到这一点？

谢谢

score 4 · Accepted Answer

像这样使用

<div class="a">LOREM IPSUM</div>
<div class="boxhighlight" >asdf</div>

你的 CSS

.a:hover ~ .boxhighlight  {
background-color:black;
color: white;
}

请参阅此供您参考

score 0 · Accepted Answer

将选择器更改为：

.a:hover + .boxhighlight {
    background-color:black;
}

选择器在悬停时更改具有boxhighlight旁边的类的元素的样式。.a

2 回答 2