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

Popular posts from this blog

1111. appearing after print sequence - php -

java - WARN : org.springframework.web.servlet.PageNotFound - No mapping found for HTTP request with URI [/board/] in DispatcherServlet with name 'appServlet' -

Ruby on Rails, ActiveRecord, Postgres, UTF-8 and ASCII-8BIT encodings -