CODEWITHSUNDEEP
jquery
Matt Elhotiby
Matt Elhotiby

Reputation: 44086

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 the click effect

Upvotes: 1

Views: 400

Answers (6)

DavideDM
DavideDM

Reputation: 1495

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

Upvotes: 2

Imrul
Imrul

Reputation: 3516

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

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

Upvotes: 0

Surreal Dreams
Surreal Dreams

Reputation: 26380

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.

Upvotes: 0

user229044
user229044

Reputation: 239521

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'.

Upvotes: 2

David Yell
David Yell

Reputation: 11855

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.

Upvotes: 1

DMCS
DMCS

Reputation: 31880

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.

Upvotes: 0

Related Questions