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

这样就成功了。