元素悬浮(hover)时对其包含的子元素进行样式设置
当父级元素hover的时候,如何对子集元素进行css样式的改变:
方法就是在hover这个伪类后面写下子集元素选择器即可,举例说明:
<div class="parent">
<ul class="middle">
<li><a href="#" class="child">80实话网</a></li>
<li><a href="#" class="child">80实话网</a></li>
</ul>
</div>
<style>
.parent{
width:200px;
}
.parent:hover{
border:1px solid #eee;
}
.parent:hover .child{
color:red;
}
</style>
当我们鼠标悬浮在parent的div上时,我们不但给它加了一个边框,还给它的子集元素a标签的文字改变了颜色。


