html - 使用 CSS 在父元素悬停时更改子元素的类

Question

我有两个 div。 Parent div 有 .parentClass 类，child div 有 .childClass 类。还有一个类 .hababa 不适用于任何一个 div。

当我将鼠标悬停在 parent div< 上时，是否可以将 child div 的类从 .childClass 更改为 .hababa/em>。 不使用 javascript

注意- 我不想复制.hababa 的内容-

.parentClass:hover .childClass{
   //contents of .hababa
}

我只想更改子div的类。

Answer 1

简单的回答，NO(ish)

但是，假设您只是为了样式目的(而不是 DOM 操作)而这样做，如果您查看您试图完成的事情的逻辑——当您悬停时，您正试图用一个类替换另一个类。

这和做不一样吗，例如:

.parentClass:hover .childClass, .hababa{
   /* this means that the child class styling matches hababa on hover */
}

以上基本上完成了与删除一个类以支持另一个类相同的事情 - 除了不删除子类具有 hababa 没有的任何样式规则，因此不会被覆盖。

在这种情况下，您还需要一个规则来重置这些，例如:

.parentClass:hover .childClass{
   /* remove any rules not shared with hababa */
}

Demo Fiddle