How to add a conditional to jQuery .hover()

Question

I want to use the jQuery hover function and can do so with no problem.

 $(".tag").hover(function() { $(this).addClass("tag-over"); }, function() { $(this).removeClass("tag-over"); });

However in some circumstances I will have already added the tag-over class due to a click event, but I don't want it remove when the user removes the mouse.

How do I only perform the addClass() and rmeoveClass() if the tag-over class is not already attached to the element.

Please let me know if that explanation is no good.

Actually this should be pretty easy ... after writing the question it seems trivial. — Ankur
– Ankur, Commented Apr 11, 2011 at 8:01
Or having two class names with the same css using one for the hover and one for the click. — Alex
– Alex, Commented Apr 11, 2011 at 8:06

user578895 · Accepted Answer · 2011-04-11 08:08:10Z

2

You actually want to probably have a different selector for the click event: tag-focus or something like that. That way your element can have both classes and it won't matter, much simpler to keep track of.

answered Apr 11, 2011 at 8:08

user578895

Sign up to request clarification or add additional context in comments.

2 Comments

Ankur Over a year ago

Yes I think I am going to have to use this method.

user578895 Over a year ago

Note that you probably don't even have to change the CSS much, just make the selector: .tag-over, .tag-focus {

Kristoffer Lundberg · Accepted Answer · 2011-04-11 08:05:35Z

2

If I understand your question, you can use :not(), which I think would be the best of dealing with this.

$(".tag:not(.tag-over)").hover(function() { $(this).addClass("tag-over"); }, function() { $(this).removeClass("tag-over"); });

answered Apr 11, 2011 at 8:05

Kristoffer Lundberg

8764 silver badges16 bronze badges

1 Comment

Felix Kling Over a year ago

This will only work if the element has the tag-over class on page load, not after a click.

lonesomeday · Accepted Answer · 2011-04-11 08:10:33Z

2

I think something like this should do it:

$('.tag').hover(function() {
    var $this = $(this);

    if ($this.hasClass('tag-over')) {
        $this.data('tag-over-existed', true);
    } else {
        $this.addClass('tag-over');
    }
}, function() {
    var $this = $(this);

    if (!$this.data('tag-over-existed')) { // i.e. if we added the class ourselves
        $this.removeClass('tag-over');
    }

    $this.removeData('tag-over-existed');
});

This uses the data method to store information about a particular element.

answered Apr 11, 2011 at 8:10

lonesomeday

239k54 gold badges330 silver badges329 bronze badges

Comments

Kent · Accepted Answer · 2011-04-11 08:14:21Z

0

why don't you try to add class tagover for click event and tag-over for hover event?

Hope this helps

answered Apr 11, 2011 at 8:14

Kent

2,9502 gold badges27 silver badges42 bronze badges

Comments

S L · Accepted Answer · 2011-04-11 08:17:08Z

0

Not elegant solution though here.

Bad thing about it, it adds click class to check.

$('.tag').hover(
    function (){
        $(this).addClass("tag-over"); 
    },
    function (){
        if(!$(this).hasClass('clicked')){
            $(this).removeClass("tag-over"); 
        }
    }
).click(function (){
            $(this).addClass('click');
        })

answered Apr 11, 2011 at 8:17

S L

14.3k18 gold badges81 silver badges119 bronze badges

Collectives™ on Stack Overflow

How to add a conditional to jQuery .hover()

5 Answers 5

2 Comments

1 Comment

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

2 Comments

1 Comment

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related