For some reason the hover pseudo selector stops working after the background gets changed. I understand that this is caused because it creates two css rules for the background and the one caused by the jquery click overrides the hover one. Despite knowing the cause... I'm not sure how to fix this. Does anyone know how to workaround this? Thanks!

HTML

<nav class="top">
    <a class="ajaxAnchor" href="home.html">
        <button id="navOne" class="top">
            <span class="top">Home</span>
        </button>
    </a>
    <a class="ajaxAnchor" href="repair.html">
        <button id="navTwo" class="top">
            <span class="top">Repairs</span>
        </button>
    </a>
    <a class="ajaxAnchor" href="training.html">
        <button id="navFour" class="top">
            <span class="top">Training</span>
        </button>
    </a>
    <a class="ajaxAnchor" href="products.html">
        <button id="navThree" class="top">
            <span  class="top">Products</span>
        </button>
    </a>
    <a class="ajaxAnchor" href="about.html">
        <button id="navFive" class="top">
            <span class="top">About</span>
        </button>
    </a>
</nav>

CSS

.top button:hover{
    background: #000000;
}

JavaScript

$('.ajaxAnchor').on('click', function (event){ 
    event.preventDefault(); 
    $('a .top').css({'background' : 'transparent'});
    $('a .top').children().css({'background' : 'transparent'});
    $(this).children().css({'background' : '#EEEEEE'});
    var url = $(this).attr('href');
    $.get(url, function(data) {
        $('section.center').html(data);
    });
});

Fiddle

For some reason the hover pseudo selector stops working after the background gets changed. I understand that this is caused because it creates two css rules for the background and the one caused by the jquery click overrides the hover one. Despite knowing the cause... I'm not sure how to fix this. Does anyone know how to workaround this? Thanks!

HTML

<nav class="top">
    <a class="ajaxAnchor" href="home.html">
        <button id="navOne" class="top">
            <span class="top">Home</span>
        </button>
    </a>
    <a class="ajaxAnchor" href="repair.html">
        <button id="navTwo" class="top">
            <span class="top">Repairs</span>
        </button>
    </a>
    <a class="ajaxAnchor" href="training.html">
        <button id="navFour" class="top">
            <span class="top">Training</span>
        </button>
    </a>
    <a class="ajaxAnchor" href="products.html">
        <button id="navThree" class="top">
            <span  class="top">Products</span>
        </button>
    </a>
    <a class="ajaxAnchor" href="about.html">
        <button id="navFive" class="top">
            <span class="top">About</span>
        </button>
    </a>
</nav>

CSS

.top button:hover{
    background: #000000;
}

JavaScript

$('.ajaxAnchor').on('click', function (event){ 
    event.preventDefault(); 
    $('a .top').css({'background' : 'transparent'});
    $('a .top').children().css({'background' : 'transparent'});
    $(this).children().css({'background' : '#EEEEEE'});
    var url = $(this).attr('href');
    $.get(url, function(data) {
        $('section.center').html(data);
    });
});

Fiddle

• javascript
• jquery
• html
• css

• 1 I just fixed it by using an important tag on the hover... but it seems like a hack more than a fix. Does anyone have a good fix? – CodeManiak Commented Jan 2, 2014 at 23:11
• 4 You're adding an inline style with jQuery, which will override any style in a stylesheet. Instead of changing the color, you could change a class and apply the colors that way. – Chad Commented Jan 2, 2014 at 23:14
• 1 You might have a rule conflict somewhere in your css. The important tag overrides other rules. Just inspect the element and figure out what is being overridden. Can't really help without the rest of the css. – Bogdan Balas Commented Jan 2, 2014 at 23:14
• you overwrite style via javascript, it is like writing style within the tag, so you need !important in stylesheet to be heavier/stronger. the good practice is to add remove a class via javascript instead using !important – G-Cyrillus Commented Jan 2, 2014 at 23:16

3 Answers 3

You can add a class to the active element instead of setting the style directly.

Script:

$('.ajaxAnchor').on('click', function (event){ 
    event.preventDefault(); 
    $('.ajaxAnchor').removeClass('active');
    $(this).addClass('active');
    var url = $(this).attr('href');
    $.get(url, function(data) {
        $('section.center').html(data);
    });
});

CSS:

.top button:hover, .active .top button:hover{
  background: #000;
}
.active .top button {
  background: #eee;
}

you are using jquery for changing background, so its changing tags style attribute your css cannot overwrite it so you can use !important or you can use javascript for hover event.

Just add important tag to your hover effect.

.top button:hover{
    background: #000000!important;
}