元素悬浮(hover)时对其包含的子元素进行样式设置

作者: dreamfly 分类: css 发布时间: 2015-03-18 22:30

当父级元素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标签的文字改变了颜色。

如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!