hover element A, show/hide Element B

Question

I have a

element containing an image. Inside that div, I have a

element which holds some information about the image. I want

相关标签:

Answer 1

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

Answer 2

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>

Answer 3

<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>

Answer 4

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