CODEWITHSUNDEEP
csshover
Badhusha
Badhusha

Reputation: 196

Hover effect not working with w3-css

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>

I am using w3-CSS for my web page. While I apply the hover effect for the 'a' elements it is applying. I can't overwrite the predefined hover effect of the w3-css. I want to change thee text color while hovering the mouse.

Upvotes: 1

Views: 1166

Answers (3)

Badhusha
Badhusha

Reputation: 196

.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>
By removing the .w3-hover-white from the a element and gave my own userdefined style.

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

Upvotes: 0

Srax
Srax

Reputation: 137

Make a new class in your stylesheet, e.g: 

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

and add it as a class to your <a> element.

so your <a> would look like this:

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

This worked for me: 

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

Upvotes: 1

Robert Wade
Robert Wade

Reputation: 5003

That stylesheet you're using is littered with !important declarations including this one at line 144:

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

If you want to use a custom color you're unfortunately going to have to declare it the same way using !important. I never advise this if I can help it but, that stylesheet is garbage, so I'm afraid you're not left many choices.

Below is a sample showing this. (I had to add a few other non-relevant styles to get the markup to display in the snipped because nav was display:none. You can ignore those.

/* 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>

Upvotes: 1

Related Questions