Geek Answers Handbook

Changing color with jquery removes hover color?

So, I have a:

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

and it works great on my site ..

When I click one of these buttons, I run the javascript function, which contains:

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

Thus, when a button is pressed, the highlight color is highlighted when the mouse is deleted.

The problem that I encountered is that after it is launched 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 cannot get it to work: http://jsfiddle.net/sUKkb/1/

Another my code: index: http://pastebin.com/7gYu9YG8 css: http://pastebin.com/Jz1bvzrr

Or it might be more useful: http://staging.easyzag.com/style.css

Source view: http://staging.easyzag.com/index.php section = drink

+4
source share
4 answers

I believe that this (usually) is what you need:

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 requires a relatively new version of jQuery (1.7+). You can 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.

+1
source

The problem here is that your jQuery adds an inline style that will override the rule from your CSS. Another problem: $('button').css('color','#000666') will apply inline styles to ALL buttons.

I would suggest adding a rule in CSS for defaults and sticky state as follows:

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

Then in your jQuery you do this instead of what you do:

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

Try it; 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 can try

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

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

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

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

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

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

0
source

you can do it without jquery if that gives you problems.

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

0
source

More articles:


All Articles