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

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.