How to add the hover class using jQuery

Question

I've tried to implement for all the <div> effect when the page loads.

 jQuery('.postCenter').addClass("hiddenClass").viewportChecker({
        classToAdd: 'visibleClass animated bounce',
        offset: 200
       });

Now this is working only when the page is loading. I need the same effect when I hover the mouse through that <div>

I tried this but didn't work.

$('.nom-img').hover(function(){

    $('.tag-nom').removeClass('animated');
    $('.tag-nom').removeClass('bounce');

    $('.tag-nom').addClass('animated');
    $('.tag-nom').addClass('bounce');
});

My Markup is this:

<div class="col-md-4 col-sm-4 col-xs-12 postLeft">
   <h2>Topeka, Kansas</h2>
   <div class="nom-img">
     <a href="topeka.html"><img src="img/xxxxxx"></a>
   </div>
   <div class="tag-nom postCenter"> <a href="#"><img src="XXX"></a>
      <h4><a href="#">vsdvsdvsdvsdv</a></h4>
   </div>
</div>

I want tag-nom to be animated when I hover the div nom-img

I have 6 of such columns. So only the corresponding tag-nomshould be animated on hover. How can I do this?

what you have to use is the $(this) selector instead of the class selector inside the hover function for the add. — Andi
– Andi, Commented Dec 3, 2014 at 14:40

Milind Anantwar · Accepted Answer · 2014-12-03 14:41:25Z

3

You need to modify the hover function to accept two methods,i.e. mouseenter and mouseleave respectively. you will also need to target .tag-nom that is next sibling element of hovered element:

$('.nom-img').hover(function(){
  $('.tag-nom').not($(this).next()).removeClass('animated bounce')
  $(this).next().addClass('animated bounce');
},function(){
  $(this).next().removeClass('animated bounce');
});

answered Dec 3, 2014 at 14:41

Milind Anantwar

82.3k26 gold badges97 silver badges128 bronze badges

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

3 Comments

HEEN Over a year ago

@user1012181: please mark the answer if it helped you, it will help others to know whcih is the most useful answer

user1012181 Over a year ago

@Milind Anantwar, On the first hover, this action is not working. When I hover again, it works. And when I scroll down and goes up, the effect shows again even without the hovering. What might be the problem?

Milind Anantwar Over a year ago

can you reproduce the problem in jsfiddle.

ArinCool · Accepted Answer · 2014-12-03 14:42:46Z

0

Try this:

$('.nom-img').hover(function(){

    $('.tag-nom').addClass('animated').addClass('bounce');
}, function(){

    $('.tag-nom').removeClass('animated').removeClass('bounce');
});

answered Dec 3, 2014 at 14:42

ArinCool

1,7581 gold badge13 silver badges24 bronze badges

Collectives™ on Stack Overflow

How to add the hover class using jQuery

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related