关于CSS :hover选择器的用法（控制子元素样式、控制同级元素样式）

1、hover定义：
:hover 选择器用于选择鼠标指针浮动在上面的元素。

提示：:hover 选择器可用于所有元素，不只是链接。

注释：在 CSS 定义中，:hover 必须位于 :link 和 :visited 之后（如果存在的话），这样样式才能生效。

2、支持的浏览器：

3、:hover控制自身样式：

<div class="aa"></div>
<style>
	aa:hover { 
		background-color:yellow;
	}
</style>

4、父元素控制子元素：

<div class="parent">
  <div class="child"></div>
</div>

<style>
	parent:hover child{
 		 //鼠标经过父元素时，改变子元素背景色
  		background:#000;
	}
</style>

5、控制同级元素样式：
hover改变同级元素样式，需要改变样式的元素，class名或id名前要加上一个+号。

<div class="doc1"></div>
<div class="doc2"></div>

<style>
	doc1:hover +doc2 {
  		//鼠标经过doc1元素时，改变doc2元素背景色
  		background:#000;
	}
</style>

如果对你有帮助，记得点个赞噢（~~）