Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

hover element A, show/hide Element B

Tags:

jquery

hover

I have a <div> element containing an image. Inside that div, I have a <p> element which holds some information about the image. I want to hover the <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 so in jQuery?

like image 598
mourique Avatar asked Dec 03 '22 15:12

mourique


2 Answers

The following will match all of your images, and target their first sibling having the tag P.

<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>
like image 100
Sampson Avatar answered Dec 06 '22 05:12

Sampson


      $("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

like image 31
synhershko Avatar answered Dec 06 '22 05:12

synhershko