hover定义

:hover 选择器用于选择鼠标指针浮动在上面的元素

hover用法

1、父元素控制子元素

格式：

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

示例：

.news .body .right .news-item:hover .pic{  
                    background-color: #fff;  
    }  
      
    .news .body .right .news-item:hover img{  
            content:url({ms:global.host/}/{ms:global.style/}/images/main1-hover.png)  
    }  
      
    .news .body .right .news-item:hover .news-body{  
                    background-color: #999999;  
    }  
  
    .news .body .right .news-item:hover a{  
            color: #fff;  
    }

2、控制自身样式

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

3、控制同级元素样式

<div class="doc1"></div>
<div class="doc2"></div>
 
<style>
	doc1:hover +doc2 {
  		//鼠标经过doc1元素时，改变doc2元素背景色
  		//注意：不能通过doc2元素改变doc1元素
        background:#000;
	}
</style>

hover问题

1、active，visited，hover，link之间的生效顺序的关系。

2、使用了中文的标识符。

3、在设置:hover前，增加来空格，导致只对其后代有效。

4、存在hover的元素的行内式样式，效果不显示。

5、控制同级元素样式时，hover只对相邻元素有效（下一个紧挨着的元素，上一个元素不能被控制）。