Jquery: bind multiple events and then untie a couple of them? it is right?

Question

bind several events and then untie a couple of them? is that right?

basically, when you hover over an element, the background color changes and then changes back when you hover over an element, but when you click on an element, I want to turn off the hover effect and change the background color to a different color, the user knows that they clicked on him. what's the best way to do this? thanks!

$('.tellmereplies').bind({click: function() { $(this).animate({'backgroundColor':'#0099ff', 'color':'#fff'}) $('.tellmereplies').unbind('mouseover','mouseout') },mouseover: function() { $(this).animate({'backgroundColor':'#fbca54', 'color':'#fff'}) },mouseout: function() { $(this).animate({'backgroundColor':'#E4E4E4', 'color':'#c0c0c3'}) } }); 

Answer 1

Take a look at the jquery event namespace . I think this is likely to be useful for you.

 $("#div1").bind("event_name.namespace1"); $("#div1").bind("some_other_event.namespace1"); $("#div1").bind("event_name.namespace2"); $("div1").unbind(".namespace1"); 

Answer 2

I think you are looking for this:

 $('.tellmereplies').bind("click", function() { $(this).animate({'backgroundColor':'#0099ff', 'color':'#fff'}) $(this).unbind('mouseover mouseout') }).bind("mouseover", function() { $(this).animate({'backgroundColor':'#fbca54', 'color':'#fff'}) }).bind("mouseout", function() { $(this).animate({'backgroundColor':'#E4E4E4', 'color':'#c0c0c3'}) }); 

Answer 3

I would do this mostly in CSS. You can create hover effects for your links using the hover class pseudo-class

 .tellmereplies:hover { color: #fff; background-color: #0099ff; } 

Then, when the user clicks on the link, add another class value to the link and override the hover effects for the link.

 $('.tellmereplies').addClass('tellmereplies-clicked'); .tellmereplies-clicked { /* new colors */ } .tellmereplies-clicked:hover { /* new colors */ }