通过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