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

这样就成功了。

下面附上w3School的css元素选择器链接:http://www.w3school.com.cn/css/css_selector_type.asp

巴特西

通过hover修改其他元素

最新文章

热门文章