文章/答案/技术大牛

发布

问不使用w3-css的悬停效果
EN

Stack Overflow用户

提问于 2017-12-03 14:11:01

回答 2查看 951关注 0票数 0

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的预定义悬停效果。我想在鼠标悬停时改变你的文字颜色。

hover

css

回答 2

Stack Overflow用户

发布于 2017-12-03 14:49:26

在样式表中创建一个新类，例如：

.myCustomHoverColor:hover {
    color: #78cc45 !important;     
}

并将其作为类添加到<a>元素中。

所以你的<a>应该是这样的：

<a href="course.html" onclick="w3_close()" class="w3-bar-item w3-button w3-hover-white  w3-padding-16 myCustomHoverColor">Courses</a>´

这对我起了作用：

<head>
    <link href="https://www.w3schools.com/w3css/4/w3.css" rel="stylesheet" />
    <style>
        .myCustomHoverColor:hover {
            color: #78cc45 !important;
        }
    </style>
</head>

<body>
    <nav class="w3-sidebar w3-collapse w3-top w3-large" style="background-color: gray; 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 myCustomHoverColor">Courses</a>
            <a href="exercise.html" onclick="w3_close()" class="w3-bar-item w3-button w3-hover-white w3-padding-16 myCustomHoverColor">Exercises</a>
            <a href="rubric.html" onclick="w3_close()" class="w3-bar-item w3-button w3-hover-white w3-padding-16 active myCustomHoverColor">Rubric</a>
            <a href="mark.html" onclick="w3_close()" class="w3-bar-item w3-button w3-hover-white w3-padding-16 myCustomHoverColor">Students</a>
            <a href="#" onclick="w3_close()" class="w3-bar-item w3-button w3-hover-white w3-padding-16 myCustomHoverColor">AnyName</a>
            <a href="contact.html" onclick="w3_close()" class="w3-bar-item w3-button w3-hover-white w3-padding-16 myCustomHoverColor">Contact</a>
            <a href="#" onclick="w3_close()" class="w3-bar-item w3-button w3-hover-white w3-padding-16 myCustomHoverColor">Logout</a>
        </div>
    </nav>

</body>

票数 1

Stack Overflow用户

发布于 2017-12-04 07:05:29

.w3-hover-white:hover{color:#000!important;background-color:#fff!important}



<a href="course.html" onclick="w3_close()" class="w3-bar-item w3-padding-16 myclass">Courses</a>

通过从中移除.w3-悬停白色，一个元素，并给出了我自己的用户定义样式。

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

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/47619214

复制

相似问题

问不使用w3-css的悬停效果
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问不使用w3-css的悬停效果EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问不使用w3-css的悬停效果
EN