4

我有一个<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 中有没有一种简单的方法可以做到这一点?

4

4 回答 4

8

以下将匹配您的所有图像,并以它们的第一个具有标签 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>
于 2009-07-13T15:00:49.517 回答
6
      $("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

于 2009-07-13T14:59:42.793 回答
3
$('#divwithimage').hover(
       function(){$('#ptag').show();}, //shows when hovering over
       function(){$('#ptag').hide();} //Hides when hovering finished
);
于 2009-07-13T15:01:25.693 回答
1
<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>
于 2009-07-13T15:04:02.020 回答