元素悬浮(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标签的文字改变了颜色。