html - 当鼠标悬停在 DIV 中时更改 H2 颜色

Question

当鼠标悬停在特定 DIV 中时，我更改了 DIV 的背景。我正在使用 CSS 来执行此操作。

.home--student:hover {
    background-image: url("blahblah.jpg");
    color:white !important;
}

上面是我为 DIV 使用的代码，但我使用的主题有一个 h2 类，它为 h2 赋予橙色，!important 不会覆盖它。

还有其他方法吗？无需编辑主题文件。我还希望当鼠标离开 div 时颜色变回橙色，所以我不想更改 h2 类。

Answer 1

以比主题更具体的方式定位 H2。

例子:

如果主题有:

h2 { background: orange; }

覆盖它(考虑到 h2 位于 div.someclass 容器内):

div.someclass > h2 { background-color: red; }

或者如果它没有任何 parent :

body > h2 { ... }

或:

h2.some-custom-class { ... }

编辑:如果你想在鼠标悬停在 div 上时改变 H2 的颜色:

div.home--student:hover > h2 { ... }

或者如果 h2 不是 div 的直接子元素，则:

div.home--student:hover h2 { ... }