CSS hover改变子标签/同级标签样式
2018-09-04 本文已影响0人
Charles_Zhang
<!DOCTYPE html>
<html>
<body>
<style>
.second {
display: none;
}
.first:hover+.second, .second:hover {
display: block;
}
/*第一个div hover时，改变其子标签的颜色*/
.first:hover .first-child {
color: cyan;
}
/*第一个div hover时，改变第二个div标签的颜色*/
.first:hover + .second {
color: red;
}
/*第一个div hover时，改变第二个div的子标签的颜色*/
.first:hover + .second>.second-child {
color: blue;
}
/*第一个div hover时，改变第三个div标签的颜色---非紧邻元素，无效*/
.first:hover + .third {
color: cyan;
}
/*第三个div hover时，改变第二个div标签的颜色---对上一个紧邻元素，无效*/
.third:hover + .second {
color:red;
}
/* ‘+’ 用于同级选择 */
/* ‘>’ 或 ‘ ’ 用于后代选择 */
/*>或空格均可用于子代选择*/
</style>
<div class='first'>第一个div标签
<div class="first-child">第一个div标签的子标签</div>
</div>
<div class='second'>第二个div标签:(第一个div标签的同级标签)
<div class='second-child'>第二个div标签的 子元素</div>
</div>
<div class="third" style="">第三个div标签</div>
</body>
</html>
经以上代码测试，在一个div 标签处于 hover状态时，可以顺利的改变同级的下一个标签的样式，但是对于同级的上一个标签的样式，没有任何改变。
各位大神，谁有解决方法，请赐教！
