首页 > css的方法使hover标签的子类颜色发生变化?

css的方法使hover标签的子类颜色发生变化?

写了一个简单的例子https://jsfiddle.net/y4okbek1/33/
span,p设置的是reset.css的内容,这个不能变。
怎样实现父类悬停,子类颜色发生变化呢?

<p class="dl1"><span>★</span><span>哈哈</span></p>

.dl1{
    color:blue;
}
span,p{
    color:black;
}
.dl1:hover{
    color:red;
}

继续使用层级选择器,例如

.dl1:hover span {
  color: red
}

只依赖color的继承是不行的。继承样式相对于定义在元素本身上的样式,优先级更低。所以,需要这样:

.dl1:hover span{
    color:red;
}

也就是,同样定义到你想作用的子元素上。 同时,这条规则有更高的优先级,因此可以覆盖掉reset那部分。


.dl1:hover span,.dll:active span{
    color:red;
}
【热门文章】
【热门文章】