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将改变其背景颜色

有办法做到这一点吗？

感谢

Answer 1

像这样使用

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

你的css

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

请参阅此Reference

请参阅此Fiddle

中的示例

Answer 2

将选择器更改为：

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

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