我们通常会遇到这样的情况,当鼠标在a元素时b元素的样式也改变。当然用JS实现很简单,那么纯CSS实现呢?其实也是相当简单,代码如下。
一,影响其他元素
<style>
.a{
width:100px;
height:100px;
background:#ccc;
}
.b{
width:100px;
height:100px;
background:#fff;
}
.a:hover .b{ background:red;}
</style>
<div class="a">1
<div>
<div class="b">2
<div>
二,影响相邻元素
<style>
.a{
width:100px;
height:100px;
background:#ccc;
}
.b{
width:100px;
height:100px;
background:#fff;
}
.a:hover +.b{ background:red;}
</style>
<div class="a">1
<div>
<div class="b">2
<div>
同理如果要影响其他元素,可以查看一下CSS元素选择器。