通過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; }

這樣就成功了。

下面附上w3School的css元素選擇器鏈接:http://www.w3school.com.cn/css/css_selector_type.asp