CODEWITHSUNDEEP
jqueryhoverjquery-hover
willy_baller
willy_baller

Reputation: 61

jQuery .hover toggleclass, toggling class of all divs not just on child elements

On the posts, I would like the hover elements to happen just to the thumbnail (and child elements) that is being hovered. Instead, the toggleclass is happening to all of the posts on the page. You can see here.

This is what my function looks like. 

    jQuery(document).ready(function () {
    jQuery( ".masonry-bp-list-inner" ).hover(function() {
        jQuery('.post_title_box').toggleClass('shiftUp');
        jQuery('.post-cat').toggleClass('shiftUpCat');
        jQuery('.thumbnail img').toggleClass('darkZoom');
      }
    );
});

Upvotes: 0

Views: 48

Answers (1)

pbarrasso
pbarrasso

Reputation: 156

If you want the toggling to only happen on children of the element being hovered over, you just need to scope your selectors to inside the element in your handler, like:

jQuery(document).ready(function () {
    jQuery( ".masonry-bp-list-inner" ).hover(function() {
        var $this = jQuery(this);
        $this.find('.post_title_box').toggleClass('shiftUp');
        $this.find('.post-cat').toggleClass('shiftUpCat');
        $this.find('.thumbnail img').toggleClass('darkZoom');
      }
    );
});

Upvotes: 1

Related Questions