jQuery CSS background change

Question

This is CSS that I'm using on this href:

a.menu:link, a.menu:visited
{
    width:160px; border-bottom:1px solid #CCC; float:left;
    font-family:Tahoma, Arial, Helvetica, sans-serif;
    font-size:12px; background-color: #FFF;
    height:21px; display:block; text-decoration:none; color:#999999;
    padding:5px 0px 0px 10px
}

a.menu:hover
{
    background-color:#f2f2f2;
    font-family:Tahoma, Arial, Helvetica, sans-serif;
    font-size:12px;color:#999999
}

The jQuery code is:

$(document).ready(function(){
    $(' .menu').click(function() {
        $(' .menu').css('backgroundColor','#FFF');
        $(this).css('backgroundColor','#f4f4f4');
    });
});

The HTML:

<a
    href="javascript: void(0);"
    class="menu"
    id="index"
> some link</a><a
    href="javascript: void(0);"
    class="menu"
    id="index"
> link 2</a><a
    href="javascript: void(0);"
    class="menu"
    > link3</a>

What I want to do is: Use the CSS hover style while the jQuery code change the background color of the clicked element. Right now the clicked element change the color but the CSS hover style does not work. How can I do that?

Answer 1

You can try

a.menu:hover
{
     background-color:Black !important;
     font-family:Tahoma, Arial, Helvetica, sans-serif;
     font-size:12px;color:#999999 
}

Note: I made the colour black to make it more apparent.

What's happening is you're adding the background colour on click and this inline takes precedence over the hover colour that is coming from the CSS. The !important makes the CSS take precedence.

Hope that helps.

(Note: tested in Firefox.)

Answer 2

Demo; http://jsfiddle.net/cw4TG/1/

Using javascript: void(0); isn't great practice. Also there is no point in adding CSS with jQuery if you can just add/remove a class and keep your presentation abstracted.

JavaScript:

$('.menu').click(function() {
    $(".menu").not($(this)).removeClass("on");
    $(this).addClass("on");
    return false;
});?

HTML:

<a href="#" class="menu" id="index"> some link</a><a href="#" class="menu" id="index"> link 2</a><a href="#" class="menu"> link3</a>?

CSS:

a.menu:link, a.menu:visited
{
    width:160px; border-bottom:1px solid #CCC; float:left;
    font-family:Tahoma, Arial, Helvetica, sans-serif;
    font-size:12px; background-color: #FFF;
    height:21px; display:block; text-decoration:none; color:#999999;
    padding:5px 0px 0px 10px
}

a.menu:hover
{
    background-color:#f2f2f2;
    font-family:Tahoma, Arial, Helvetica, sans-serif;
    font-size:12px;color:#999999
}

.on {
    background: #000 !important;
}

Answer 3

Initially, I would recommend using an ID (#menu) instead of a Class (.menu).

$(function() {
   $('.menu').hover( function(){
      $(this).css('background-color', '#FFF');
   },
   function(){
      $(this).css('background-color', '#F4F4F4');
   });
});

Best of luck!