Point element A, show / hide element B

Question

I have a <div> element containing an image. Inside this div, I have a <p> element that contains some image information. I want to hover a <div> containing the image, and then show or hide the <p> element.

 <div class="box"> <img src="img/an_039_AN_diskette.jpg" width="310px" height="465px" /> 6 Pharma IT <p class="hoverbox">some information</p> </div> 

Is there an easy way to do this in jQuery?

Answer 1

  $("css_selector_of_img").hover( function () { $("css_selector_of_p_element").show(); }, function () { $("css_selector_of_p_element").hide(); } ); 

See http://docs.jquery.com/Events/hover

Answer 2

The following will fit all your images and aim at their first sibling with the P tag.

 <script type="text/javascript"> $(document).ready(function(){ $("div.box img").hover( function(){$(this).siblings("p:first").show();}, function(){$(this).siblings("p:first").hide();} ); }); </script> <div class="box"> <img src="somefile.jpg" /> <p>This text will toggle.</p> </div> 

Answer 3

 $('#divwithimage').hover( function(){$('#ptag').show();}, //shows when hovering over function(){$('#ptag').hide();} //Hides when hovering finished ); 

Answer 4

 <div class="box"> <img ... /> <p class="hoverbox">Some text</p> </div> <script type="text/javascript"> $('div.box img').hover( function() { $('div.box p.hoverbox').show(); }, function() { $('div.box p.hoverbox').hide(); } ); </script>