jQuery CSS background change

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?

---

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

---

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

---

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!

---

you can use this : hover jquery.

$('a').hover(function(){
    $(this).addClass('abc');
},function(){
    $(this).removeClass('abc');
});