Changing color with jquery removes hover color?

Question

So i have:

#selection_menu .secondary_options button:hover { color: #000066; }

and it works great on my site..

When one of these buttons is clicked, however, i run a javascript function that contains:

$('button').css("color","#FFFFFF");
if(!$sameTile)
    $($tileSelector).css("color","#000066");

So that when the button is clicked, the highlight color sticks when the mouse is moved away.

The problem i am having is that after this is run for the first time, the buttons stop changing color when highlighting. How can i get around this? Or is this normal behavior?

I am trying to add a class and i can't get it to work: http://jsfiddle.net/sUKkb/1/

Some more of my code: index: http://pastebin.com/7gYu9YG8 css: http://pastebin.com/Jz1bvzrr

Or this might be more helpful: http://staging.easyzag.com/style.css

view-source:http://staging.easyzag.com/index.php?section=drink

Answer 1

The issue here is that your jQuery is adding an inline style which will override the rule from your CSS. The other issue is $('button').css('color','#000666') is going to apply inline styles to ALL buttons.

I would suggest adding a rule in your CSS for the defaults and the sticky state like this:

button { color:#fff }
button:hover { color:#fff }
.sticky-state { color:#000066 }

Then in your jQuery you do this instead of what you're doing:

`$(/*add your selector here*/).addClass('.sticky-state');

Answer 2

I believe this is (generally) what you're after:

jsFiddle: http://jsfiddle.net/sUKkb/5/

HTML:

<button class="not-sticky">Hello</button>

JS:

$('button').on('click', function(e){
    $(this).removeClass('not-sticky').addClass('sticky-state');
});

Note, this does require a relatively new version of jQuery (1.7+). You could also use:

$('button').live('click', function(e){
    $(this).removeClass('not-sticky').addClass('sticky-state');
});

or

$('button').click(function(e){
    $(this).removeClass('not-sticky').addClass('sticky-state');
});

for older versions of jQuery.

Answer 3

Try this; in your CSS;

.new_class{ 
   color:#000066 
}

in your JS

$('button').css("color","#FFFFFF");
if(!$sameTile){
    $($tileSelector).removeClass()('.your_previous_class');
    $($tileSelector).addClass('.new_class');
}

or you may try

$($tileSelector).css({ 'color':'#000066' });

here is the fiddle http://jsfiddle.net/sUKkb/2/ (without class)

and this one http://jsfiddle.net/sUKkb/3/ (with class)

and this one http://jsfiddle.net/sUKkb/4/ using ID instead of class to make buttons unique

And I think, what you want is a toggle solution like the fiddle below;

http://jsfiddle.net/sUKkb/7/

Answer 4

you can do it without jquery if that's giving you trouble.

add an onmouseover and an onmouseout handler for the hover effect and add an onclick that first cancels the onmousover and onmouseout and then sets the desired color.