通過hover修改其他元素，hover修改元素

通過hover修改其他元素，hover修改元素

hover，我們都知道，是監聽組件“懸停狀態”的一個偽類。

我們一般通過hover來修改組件的背景什麼的，很少涉及到太複雜的操作。也就是說我們一般只是對加了hover偽類的元素自身的樣式進行改變，比如這樣：

<form name="register" method="post" >    <p><label for="name" >姓名 ：</label><input type="text" name="name" /></p>    <p><label for="password" >原始密碼 ：</label><input type="password" name="password" /><span>(密碼長度為6-20位元組。不修改請留空)</span></p></form>

.form p {    /*垂直置中*/    line-height: 50px;    height: 50px;    border-bottom: 1px dashed #CCC;    font-size: 14px;    font-family: "宋體";}.form p:hover {    /*當滑鼠懸浮時，將背景色改變*/    background-color: #FFE8E8;}.form span {    display: none;}.form p:hover span {    /*當滑鼠懸浮時，將span中的內容顯示出來*/    display: inline;}

上面的代碼中我們為p標籤加了hover偽類，當滑鼠懸浮時，將背景色改變並將p標籤內的span標籤中的內容顯示出來。

但如果將span標籤定義到p標籤外面，同樣滑鼠懸浮到p標籤上我們要顯示span的內容怎麼辦？

css提供了一個“+”來代表兄弟元素。

注意：兄弟元素必須有相同的父節點，且緊緊相鄰（之間不能有任何其他標籤）。

那麼我們通過這個方法來修改一下剛才的代碼：

<form name="register" method="post" >    <p><label for="name" >姓名 ：</label><input type="text" name="name" /></p>    <p><label for="password" >原始密碼 ：</label><input type="password" name="password" /></p><span>(密碼長度為6-20位元組。不修改請留空)</span></form>

我們將span標籤從p中拿了出來，並緊貼著p標籤放在了其後面。

.form p:hover + span {    display: inline;}

將前面寫到了針對span的hover偽類修改成這樣（其實就是加了一個“+”號）。

這樣就成功了。