css - 悬停效果不适用于 w3-css

Question

a:hover
{
  text-decoration: none;
  color: #F78888;
}

<link href="https://www.w3schools.com/w3css/4/w3.css" rel="stylesheet" />
<nav class="w3-sidebar w3-collapse w3-top w3-large" style="z-index:100;width:210px;font-weight:bold;" id="mynav">
    <div class="w3-container" style="color: white;">
        <h3 class="w3-padding-64"><b>No<br>Name</b></h3>
    </div>
    <div class="w3-bar-block  w3-padding-8" style="color: white;">
        <a href="course.html" onclick="w3_close()" class="w3-bar-item w3-button w3-hover-white  w3-padding-16">Courses</a>
        <a href="exercise.html" onclick="w3_close()" class="w3-bar-item w3-button w3-hover-white w3-padding-16">Exercises</a>
        <a href="rubric.html" onclick="w3_close()" class="w3-bar-item w3-button w3-hover-white w3-padding-16 active">Rubric</a>
        <a href="mark.html" onclick="w3_close()" class="w3-bar-item w3-button w3-hover-white w3-padding-16">Students</a>
        <a href="#" onclick="w3_close()" class="w3-bar-item w3-button w3-hover-white w3-padding-16">AnyName</a>
        <a href="contact.html" onclick="w3_close()" class="w3-bar-item w3-button w3-hover-white w3-padding-16">Contact</a>
        <a href="#" onclick="w3_close()" class="w3-bar-item w3-button w3-hover-white w3-padding-16">Logout</a>
    </div>
</nav>

我正在为我的网页使用 w3-CSS。当我为正在应用的“a”元素应用悬停效果时。我无法覆盖 w3-css 的预定义悬停效果。我想在悬停鼠标时更改文本颜色。

Answer 1

您正在使用的样式表中充斥着 !important 声明，包括第 144 行的声明:

.w3-button:hover{color:#000!important;background-color:#ccc!important}

如果您想使用自定义颜色，很遗憾，您将不得不使用 !important 以相同的方式声明它。如果可以的话，我从不建议这样做，但是那个样式表是垃圾，所以恐怕你没有太多选择。

下面是一个示例。 (我不得不添加一些其他不相关的样式以使标记显示在片段中，因为 nav 是 display:none。您可以忽略这些样式。

/* For demo only */
body {
  background-color: #ddd;
}
nav.w3-sidebar.w3-top {
  display:block;
  background-color: #ccc;
}



/* override !important declarations from W3 stylesheet */
a.w3-button:hover {
  color:red !important;
  background-color:#ccc !important
}

<link href="https://www.w3schools.com/w3css/4/w3.css" rel="stylesheet" />
<nav class="w3-sidebar w3-collapse w3-top w3-large" style="z-index:100;width:210px;font-weight:bold;" id="mynav">
    <div class="w3-container" style="color: white;">
        <h3 class="w3-padding-64"><b>No<br>Name</b></h3>
    </div>
    <div class="w3-bar-block  w3-padding-8" style="color: white;">
        <a href="course.html" onclick="w3_close()" class="w3-bar-item w3-button   w3-padding-16">Courses</a>
        <a href="exercise.html" onclick="w3_close()" class="w3-bar-item w3-button w3-hover-white w3-padding-16">Exercises</a>
        <a href="rubric.html" onclick="w3_close()" class="w3-bar-item w3-button w3-hover-white w3-padding-16 active">Rubric</a>
        <a href="mark.html" onclick="w3_close()" class="w3-bar-item w3-button w3-hover-white w3-padding-16">Students</a>
        <a href="#" onclick="w3_close()" class="w3-bar-item w3-button w3-hover-white w3-padding-16">AnyName</a>
        <a href="contact.html" onclick="w3_close()" class="w3-bar-item w3-button w3-hover-white w3-padding-16">Contact</a>
        <a href="#" onclick="w3_close()" class="w3-bar-item w3-button w3-hover-white w3-padding-16">Logout</a>
    </div>
</nav>