CSS:hover常见问题及用法
目录
hover定义
:hover 选择器用于选择鼠标指针浮动在上面的元素
hover用法
- 控制自身样式
<div class="aa"></div> <style> aa:hover { background-color:yellow; } </style> - 父元素控制子元素
<div class="parent"> <div class="child"></div> </div> <style> parent:hover child{ //鼠标经过父元素时，改变子元素背景色 background:#000; } </style> - 控制同级元素样式
<div class="doc1"></div> <div class="doc2"></div> <style> doc1:hover +doc2 { //鼠标经过doc1元素时，改变doc2元素背景色 //注意：不能通过doc2元素改变doc1元素 background:#000; } </style>hover问题
- active，visited，hover，link之间的生效顺序的关系。
- 使用了中文的标识符。
- 在设置:hover前，增加来空格，导致只对其后代有效。
- 存在hover的元素的行内式样式，效果不显示。
- 控制同级元素样式时，hover只对相邻元素有效（下一个紧挨着的元素，上一个元素不能被控制）。
后记
借鉴自：