jquery - How to make hover effect to show elements in a div using Javascript -
so i'm new javascript , have been trying write programme changes opacity of div , shows it's hidden 'p' element . when hover div hidden 'p' elements in other div appear.how make 'p' element show in hovered div ?. please suggestion/advice appreciated. thanks
html
<div class = "description"> <a><img src="image.jpg" height = 330px width = 220px></a> <p class = "word"> image description</p> </div> <div class = "description"> <a><img src="image.jpg" height = 330px width = 220px></a> <p class = "word"> image description</p> </div> javascript
$(document).ready(function(){ $('.word').hide(); $('.description').hover(function(){ $(this).fadeto('fast',0.6); $('.word').show(); }); $('.description').mouseleave(function(){ $('.description').fadeto('fast',1); $('.word').hide(); }); });
you want find .word elements in particular div,so use $(this).find()
$(document).ready(function(){ $('.word').hide(); $('.description').hover(function(){ $(this).fadeto('fast',0.6); $(this).find('.word').show(); }); $('.description').mouseleave(function(){ $(this).fadeto('fast',1); $(this).find('.word').hide(); }); }); or more succinctly
$(document).ready(function(){ $('.word').hide(); $('.description').hover(function(){ $(this).fadeto('fast',0.6).find('.word').show(); }).mouseleave(function(){ $(this).fadeto('fast',1).find('.word').hide(); }); }); also img tags wrong. mean <img src="image.jpg" style="height: 330px; width: 220px">
Comments
Post a Comment