why doesnt it stay highlighted in jQuery?

I have this Jquery

$(function() {
  $('.count_links').hover( function(){
     $(this).addClass("highlight");
   },
   function(){
     $(this).removeClass("highlight");
   });
   $('.count_links').click(function(){
     $('.count_links').not(this).removeClass('highlight');
     $(this).addClass("highlight");
   });
});

but the link class never stays after its clicked

I want the hover effect and开发者_JAVA百科 the click effect

---

You're removing the highlight class when the cursor leaves the element.

It doesn't matter whether you add the class on click or on hover, the second function passed to .hover (which is called on mouse-out) removes the class.

You might consider adding a different class on click, like 'selected'.

---

If I understand that you want to do I suggest that piece of code

$(function() {
  $('.count_links').hover( function(){
     $(this).addClass("highlight");
   },
   function(){
     $(this).removeClass("highlight");
   });
   $('.count_links').click(function(){
     $(this).addClass("highlight");
     $(this).unbind('mouseenter mouseleave');
   });
});

When click you unbind the hover handler

---

It is staying, but you're removing it again once you hover over and out again. You'll want a way to detect how you added the class. Maybe another dummy class, such as

function(){
  $(this).addClass('highlight click')'
}

Then you can look for this in the hover and not remove it.

---

Add a console log to your two hover functions. You can see in some browsers the "out" function is called multiple times even though the cursor is still over the item. I'm unsure what causes this strange behavior.

---

A very simple workaround would be to create to highlight classes with identical CSS styles, hover_highlight and click_highlight. Add and remove the associated class with the action. So if you click, you have click_highlight added, which the hover out action won't remove because it's toggling hover_highlight. Then your actions aren't in conflict.

---

   $('.count_links').click(function(){
     $(this).siblings().removeClass('highlight');
     $(this).addClass('highlight').unbind('hover');
   });

and 2 different classes will be better for highlighting and Click.