css中hover伪类的几种常用手法（随笔）

css中hover伪类的几种常用手法（随笔）

1.hover改变自身的效果

<div id="div1"></div>
#div1:hover{

}

2.改变子元素效果

<div id="div1">
	<div class="item1"></div>
	<div class="item2"></div>
</div>
#div1:hover .item1{

}

3. hover改变兄弟元素样式：需要在hover之后添加"+"

<div id="div1">
</div>
<div class="item1"></div>
<div class="item2"></div>
#div1:hover + .item1{
//注意只能改变相邻的兄弟元素的样式
}

4.改变所有同级元素样式

<div id="div1">
</div>
<div class="item"></div>
<div class="item"></div>

#div1:hover ~.item{

}