前言
有时候我们想在鼠标移动到元素上的时候,改变自身、子元素、其他元素的css样式,除了通过js事件的方式实现外,还可以通过纯css实现,即通过伪类hover改变自身、子元素、其他元素的样式
hover改变元素自身样式
<div class="father1"> <div class="son1">子元素</div> </div> <div class="father1-brother">其他元素</div>
.father1:hover { background: #f2ee24; }
hover改变子元素样式
<div class="father1"> <div class="son1">子元素</div> </div> <div class="father1-brother">其他元素</div>
.father1:hover .son1 { background: #f2ee24; }
hover改变其他元素样式
<div class="father1"> <div class="son1">子元素</div> </div> <div class="father1-brother">其他元素</div>
.father1:hover +.father1-brother { background: #f2ee24; }