hover修改子元素样式不生效

#hover修改子元素样式不生效| 来源: 网络整理| 查看: 265

父元素Hover样式不生效

遇到需求: 想要实现父元素hover时,两个子元素字体颜色都变化,但是一开始怎么设置都不生效.

开发时写过如下代码:

子元素1 子元素2 .wrap {} .item-one { color: black; } .item-two { color: black; } /* 方法1 这样是无效的 */ .wrap:hover { color: red; } /* 方法2 这样使有效的 */ .wrap:hover .item-one { color: red; } .wrap:hover .item-two { color: red; }

当时使用第一种 hover 方案,字体颜色怎么都不会变,使用第二种方案就可以了.

原因: item-one item-two 此前已经有样式覆盖, hover 中的父元素的color属性无法被传递到子元素,如果去除这一段代码:

.item-one { color: black; } .item-two { color: black; }

那么方法1是有效的

【本文地址】

公司简介

联系我们