Question

Hi to whoever is willing to help 🙂

I’m trying to code something I saw as an example on a website because even though they have provided the code I can’t make it work.

Here is a link to where I got the example from:

http://coding.smashingmagazine.com/2012/05/31/50-jquery-function-demos-for-aspiring-web-developers/

Scroll down to the “Bind() Unbind()” section. It’s the second example with the orange and purple squares. I would like to know how to get that effect of having the color change, then remain changed and then change again if the mouse goes over the square a second time.

*i dont need the double click effect, just the color changing.

Thank you

Answer 1

The base CSS for the div element is orange.

On mouseover it toggles a CSS class called purplebg which makes it purple when added, and reverts back to orange when mouseover fires again. That’s pretty much it.

}).live('mouseover', function(e) {
  $(this).toggleClass('purplebg');
});

Here is a simple jsFiddle example