悬停元素 A，显示/隐藏元素 B答案

【问题标题】：hover element A, show/hide Element B悬停元素 A，显示/隐藏元素 B
【发布时间】：2009-07-13 14:56:37
【问题描述】：

我有一个包含图像的<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 中有一个简单的方法吗？

【问题讨论】：

你能提供你想做的HTML标记吗？我有点不清楚。
对不起，我忘了格式化代码

标签： jquery hover

【解决方案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>

【讨论】：

我也在做同样的事情。但我的段落大约有 100 行。所以我必须向下滚动我的段落才能获得完整的内容。在这种情况下，当我从此处的 A 内容（图片）中移除悬停时，内容将隐藏。我该怎么办

【解决方案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

【讨论】：

我把这个放在哪里？当我在 document.ready 部分中将其写在脑海中时，它只会破坏我的 js 的其余部分。
把它放在页面末尾，用包围，就在

【解决方案3】：

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

【讨论】：

别忘了用逗号分隔两个函数。
我从萤火虫那里得到这个：缺失；声明之前
这可能是因为我在两个函数之间缺少逗号。我刚刚尝试过，它对我有用
没有报错了，但是效果还是不行。是不是因为我用包含和 php 开关创建了整个页面，所以 javascript 有点坏了？

【解决方案4】：

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

【讨论】：