CSS:hover常见问题及用法

目录

hover定义

hover用法

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只对相邻元素有效（下一个紧挨着的元素，上一个元素不能被控制）。

后记

借鉴自：

css之伪类hover改变自身、子元素、其他元素的样式_Boale_H的博客-CSDN博客