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?

Peter Mortensen · Accepted Answer · 2010-03-04 15:57:16Z

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

Peter Mortensen · Accepted Answer · 2010-03-04 15:55:05Z

0

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

edited Mar 4, 2010 at 15:55

Peter Mortensen

31.4k22 gold badges110 silver badges134 bronze badges

answered Mar 4, 2010 at 12:15

Kamal

2,5222 gold badges35 silver badges48 bronze badges

2 Comments

Barrie Reader Over a year ago

I'm sure this will not work in IE7 and below (not sure about IE8).

user241244 Over a year ago

Beware using !important without need -- it's better and more flexible to choose a solution that relies on the cascade itself, which is probably the issue.

Barrie Reader · Accepted Answer · 2010-03-04 12:17:55Z

0

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!

answered Mar 4, 2010 at 12:17

Barrie Reader

10.7k11 gold badges77 silver badges141 bronze badges

Comments

Pascal MARTIN · Accepted Answer · 2011-03-21 11:50:01Z

0

you can use this : hover jquery.

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

edited Mar 21, 2011 at 11:50

Pascal MARTIN

402k82 gold badges665 silver badges666 bronze badges

answered Mar 21, 2011 at 11:06

Suhail

243 bronze badges

Collectives™ on Stack Overflow

jQuery CSS background change

4 Answers 4

Comments

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related