Jump to content

jquery hover effect


Nikolas96
 Share

Recommended Posts

hi guys

i have four box div like this and a sub div in each div with display:none.

i want when box dives hovered the inner sub div get fade in jquery effect.

with this => $(".box").hover => $(".sub").fadeIn()

but with this, when one of the boxes hovered all of subs get fadeIn effect

i want just the inner sub div of each box get this effect

what do i do? thanks...

<div class="box">
<div class="sub">

</div>
</div>
Link to comment
Share on other sites

You can use $(this) representing the parent element that was hovered over then children() OR find() with class name to represent child of parent .sub

 

With .children()

$(document).ready(function(){
    $(".box").hover(function(){
        $(this).children('.sub').stop(true,false).fadeIn(); }, function(){
        $(this).children('.sub').stop(true,false).fadeOut();
    });
});

With .find()

$(document).ready(function(){
    $(".box").hover(function(){
        $(this).find('.sub').stop(true,false).fadeIn(); }, function(){
        $(this).find('.sub').stop(true,false).fadeOut();
    });
});
  • Like 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...