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; }

或者如果没有父母：

body > h2 { ... }

或：

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

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

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

或者如果h2不是div的直子，那么：

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

Answer 2

这可能就是你想要的：

   <form method="post">
      
                <button class="btn search">Search</button>
    
    </form>

.home--student:hover { background-image: url("blahblah.jpg"); } .home--student:hover, .home--student:hover h2 { color:white !important; }定位.home--student:hover内的<div>和.home--student:hover h2定位<h2>内的任何<div>！

注意

您确定您确实需要!important吗？除非您覆盖的CSS本身使用!important，否则您实际上不需要!important。

在这种情况下，只需确保the specificity of your CSS足够高！

鼠标悬停在DIV

2 个答案:

注意