Nikolas96 Posted December 31, 2016 Share Posted December 31, 2016 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 More sharing options...
dsonesuk Posted December 31, 2016 Share Posted December 31, 2016 Because that is exactly what you are telling it to do target ALL .sub elements wherever they are, instead of child element with class .sub of parent box that was hovered over. 1 Link to comment Share on other sites More sharing options...
dsonesuk Posted December 31, 2016 Share Posted December 31, 2016 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(); }); }); 1 Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now