不用js的情况下，我想在鼠标悬停元素A时改变元素B的样式，如display，应该如何实现？

Question

我的思路其实是选择器选择A元素hover后选择B元素，但实际上不起作用，而且好像语法上有点冲突？？

结构大概如下

<div class='A'></div>
<div class='B'></div>

我的思路。。

.A:hover .B{
    display:block
}

Answer 1

按你的思路 选择的是A的子元素B.
实际上B是A的同级兄弟元素

两元素为兄弟关系时 应该使用+号连接以改变后边的元素样式

.A:hover+.B{
    display:block
}