HTML/CSS current active menu does not show active


Tags: javascript,html,css

Problem :

please see https://jsfiddle.net/qvh5jsc4/1/

I was thinking job of the

li a:hover:not(.active) {
    background-color: #111;
}

to reset none active color. But this is not working. Home link stays green.

So how to make the active link shows as green.

I have the following code:

CSS

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #333;
}

li {
    float: left;
}

li a {
    display: block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

li a:hover:not(.active) {
    background-color: #111;
}

.active {
    background-color: #4CAF50;
}

HTML

<ul>
  <li><a class="active" href="#home">Home</a></li>
  <li><a href="#news">News</a></li>
  <li><a href="#contact">Contact</a></li>
  <li><a href="#about">About</a></li>
</ul>


Solution :

try this using jquery : https://jsfiddle.net/xqyhwq36/3/

li a:hover:not(.active) {
    background-color: #111!important;
}

li a:hover {
    background-color: #444;
}
.active {
    background-color: #4CAF50;
}
$("ul a").click(function(){
$("ul a").removeClass("active");
   $(this).addClass("active");
});

    CSS Howto..

    how to style this via css in Bootstrap

    How to get the correct mouse position in relation to a div that has has a scale transform applied

    How to quickly find a CSS class when there are multiple stylesheets

    In jQuery how do I make multiple changes to css in a function?

    How to have multiple borders on div using css

    How to modify CSS to achieve three lines?

    Switchery rendered wrong when triggering click after View is shown

    How does the Meebo bar work so well cross-browser?

    How can I align a div right under another?

    how to prevent css and js being cached by internet service provider?

    How to select an element that must have more than one css class?

    HTML/CSS: how to put text both right and left aligned in a paragraph

    How to align dropdown sub menu?

    CSS positioning: how to make it relative to one element but not the other?

    How to build a hover effect with css only, or css+jquery

    How to call a function for each element with a particular class, every time the window scrolls (jquery))

    How to compress the js, css files in /public in Rails production mode

    how to select a class which is children of many elements

    How to give different color to draghandle in RangeSlider

    How can I draw such 2 lines in this shape using CSS HTML

    CSS: How to ignore an element so parent's padding will accomodate to other elements?

    How to justify short text inside fill fixed width parent with CSS?

    how to create a fixed js slider

    how to: dynamic navigation bar size depending on dynamic image size?

    How to imitate the native iPhone look and feel in a web app developed with the ASP.NET platform?

    transition ease-out, right to left, how?

    How to get the first letter of each word to be a different size and the rest to be the same size

    how you can change the style of the page without changing CSS files?

    How can I get these two widgets to align horizontally using CSS selectors?

    css 3d animation, how?