使用CSS更改父级悬停时更改子元素的类

Question

我有两个div。 父div 的课程为.parentClass，子div 的课程为.childClass。还有一个类.hababa不适用于任何一个div。

当我将鼠标悬停在父div 上时，是否可以将子div 的类别从.childClass更改为.hababa。 不使用javascript

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

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

我只想更改子div 的类。

Answer 1

简单回答，否（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