悬停元素A,显示/隐藏元素B.

Question

我有一个<div>包含图像的元素.在div中,我有一个<p>元素可以保存有关图像的一些信息.我想悬停<div>包含图像,然后显示或隐藏<p>元素.

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

在jQuery中有一个简单的方法吗？

Answer 1

以下内容将匹配您的所有图像,并定位他们的第一个兄弟标记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 2

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

请参见http://docs.jquery.com/Events/hover