Question

如何用CSS来响应同级DIV的前一个元素？

例如下面：
<style>
.aa{width:300px;height:50px;margin-left:auto;margin-right:auto;}

.a1{width:100px;height:50px;background:#333;float:left;}

.a2{width:100px;height:50px;background:#666;float:left;}

.a3{width:100px;height:50px;background:#999;float:left;}
</style>
<div class="aa">
<div class="a1"></div>
<div class="a2"></div>
<div class="a3"></div>
</div>
我想要鼠标悬停在a2的时候，a1改变背景色。用CSS怎样才能实现呢？

Answer 1

b这一类的元素都是a的同级元素并且是a元素之后的就可以a:hover~b{....}

完美解决 ，经测试！

附上我自己的代码：

ul li a img:hover ~h3 {
    padding-bottom: 10px;
    color: #25AAFF!important;
    border-bottom: 2px solid #25AAFF;
}

Answer 2

CSS有这么智能？真心不晓得
但是可以用JS实现 在a1a2都定义id a2定义一个鼠标经过事件 当鼠标经过a2的时候触发事件 然后根据id获取他们的对象 再将a1的背景换下就ok

Answer 3

CSS相邻兄弟选择器只支持后面的元素，而不支持前面的兄弟元素，不支持父选择器。

网页链接

Answer 4

悬停a1可以改变a2，如下：
.a1:hover>.a2{background:#f00;}
哼哼，更绝的是css还可以设置自己的变量
body{--a:#ff0;}
.need-bg-change{background-color:var(--a);}