通过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伪类修改成这样（其实就是加了一个“+”号）。

这样就成功了。