CODEWITHSUNDEEP
jquerycsshtml
Dyck
Dyck

Reputation: 2675

Jquery Hover Affecting All Divs

I have this jquery hover effect, how it works is there is one div that is invisible and when you hover over a div it slides the invisible div up, making it visible. When there are multiple divs and you hover over one div / box.. all the other invisible divs slide up, when just the div you hovered over should slide up. Here is my jquery for the slide up divs:

$(function(){
    $(".video-entry-summary").hover(function() {

        $(".videotntitle").stop(true,true).animate({'bottom': '+=211px' },200);

    }, function() {

        $(".videotntitle").stop(true,true).animate({'bottom': '-=211px' },200);

    });
});

Here is the jsFiddle to demonstrate my problem.. and like I said, only one div should be sliding up, not all of them.

http://jsfiddle.net/Rfs6G/1/

Any help would be appreciated!! :) ​

Upvotes: 2

Views: 678

Answers (2)

Zevi Sternlicht
Zevi Sternlicht

Reputation: 5399

You are targeting the wrong selectors instead of the right ones.

You want to target

$(this).find('.videotntitle').stop(). etc etc;

http://jsfiddle.net/Rfs6G/2/

Upvotes: 1

Denys Séguret
Denys Séguret

Reputation: 382112

You may specify the context to target the right div :

$(function(){
    $(".video-entry-summary").hover(function() {  
        $(".videotntitle", this).stop(true,true).animate({'bottom': '+=211px' },200);
    }, function() {
        $(".videotntitle", this).stop(true,true).animate({'bottom': '-=211px' },200); 
    });
});

$(".videotntitle", this) searches for the elements with class videotntitle inside this (which is the hovered element)

Demonstration

Upvotes: 4

Related Questions