偽類在各位前端攻城獅的眼里肯定不陌生，但是你以為hover偽類只能修改當(dāng)前元素本身？
那你就錯了，來看看吧！
:hover偽類的定義
定義和用法
:hover 偽類在鼠標(biāo)移到元素上時向此元素添加特殊的樣式。
說明
這個偽類應(yīng)用處于“懸停狀態(tài)”的元素。懸停定義為用戶指示了一個元素但沒有將其激活。對此最常見的例子是將鼠標(biāo)指針移到 HTML 文檔中一個超鏈接的邊界范圍內(nèi)。
正題
當(dāng)鼠標(biāo)懸停在某個元素的時候，你想觸發(fā)另外一個元素的效果，一般人想到的是使用js來搞定這個問題。
當(dāng)然，一些動過腦筋的同學(xué)們一定會想如果能有:hover偽類搞定就好了，可是看了看:hover的定義，就打消了這個念頭。
其實(shí)如果只改變該元素內(nèi)其他元素的樣式我們是可以做到的，聰明的你可能已經(jīng)想到了辦法。
兩個嵌套的div，我們把鼠標(biāo)懸停在外部的div，改變內(nèi)部div的樣式。
開始的時候是這樣的：
<div class="big">
<div class="small"></div>
</div>
.big{
position: relative;
width: 200px;
height: 200px;
background: red;
}
.small{
position:absolute;
left:50%;
top:50%;
margin-left:-50px;
margin-top:-50px;
width: 100px;
height: 100px;
background: orange;
}
我們鼠標(biāo)懸停在大的div里，改變里面小的div樣式，當(dāng)鼠標(biāo)懸停時我們來把小的div改成藍(lán)色。
上代碼！
.big{
position: relative;
width: 200px;
height: 200px;
background: red;
}
.big:hover .small{
background: blue;
}
.small{
position:absolute;
left:50%;
top:50%;
margin-left:-50px;
margin-top:-50px;
width: 100px;
height: 100px;
background: orange;
}
直接在偽類后面加上內(nèi)部元素的類名，達(dá)到了我們的效果。
怎么樣？比寫js或者jq來的簡單吧，css玩好了我們照樣6的飛起。
知識補(bǔ)充
錨偽類一共有四個屬性，分別是：未被訪問狀態(tài)，已訪問狀態(tài)，鼠標(biāo)懸停狀態(tài)和活動狀態(tài)。
a:link {color: #FF0000} /* 未訪問的鏈接 */
a:visited {color: #00FF00} /* 已訪問的鏈接 */
a:hover {color: #FF00FF} /* 當(dāng)有鼠標(biāo)懸停在鏈接上 */
a:active {color: #0000FF} /* 被選擇的鏈接 */
但是在設(shè)置的時候，如果不注意細(xì)節(jié)會導(dǎo)致設(shè)置無效化。
書寫時應(yīng)該按以下順序來寫:
:link > :visited > :hover > :active
同一元素的錨偽類，低級的不能寫在高級的前面，否則代碼不會生效。
