jquery - 悬停元素 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>