jQuery：如何在悬停时切换显示

Question

我有 2 个跨度。

第一个： 第二个：

我的 CSS：

.desc {display: none;}

我想要做的，是在悬停第一个跨度时显示第二个跨度。没有花哨的效果或任何东西，只是显示跨度。 我知道有一个简单的 jQuery 解决方案，但我是 jQuery 新手，所以我希望得到一些帮助来找到它。 ；）

这就是我到目前为止所拥有的。语法正确吗？

<script>
$(document).ready(function() {
    $(".body").hover(function () {
        $(".desc").toggle();
    })
})
</script>

更新！

正如 @thenduks 指出的，这会导致每个 .desc 元素在 .body 悬停时显示。正如您可能想象的那样，我有几个 .body 和 .desc，我只想在将鼠标悬停在 上时显示相应的 .desc >.body。

这是我标记的一部分：（整个网站仍然只是本地的，所以我不能给你一个网址来测试 - 抱歉）

<ul class="form">
    <li>
      <label class="grid_3 alpha caption" for="from_name">Navn/Firma</label>
      <span class="grid_4 body"><input type="text" id="from_name" name="form[from_name]" size="20" value=""></span>
      <span class="grid_5 omega validation"><span class="formNoError" id="component74">Udfyld navn eller firma for afhentningsadressen.</span></span>
      <span class="grid_5 omega desc" style="display: none;"><p>Navnet på afsenderen.</p></span>
    </li>
    <li>
      <label class="grid_3 alpha caption" for="from_address1">Adresse</label>
      <span class="grid_4 body"><input type="text" id="from_address1" name="form[from_address1]" size="20" value=""></span>
      <span class="grid_5 omega validation"><span class="formNoError" id="component75">Udfyld afhentningsadressen.</span></span>
      <span class="grid_5 omega desc" style="display: none;"><p>Adressen på afsenderen.</p></span>
    </li>
    <li>
      <label class="grid_3 alpha caption" for="from_address2">Adresse 2</label>
      <span class="grid_4 body"><input type="text" placeholder="etage/lejlighedsnr./e.l." id="from_address2" name="form[from_address2]" size="20" value=""></span>
      <span class="grid_5 omega validation"><span class="formNoError" id="component76">Invalid Input</span></span>
      <span class="grid_5 omega desc" style="display: none;"><p></p></span>
    </li>
</ul>

Answer 1

这将导致将鼠标悬停在任何 .body 元素上，显示所有 .desc 元素。

如果您发布实际标记，我们可以找出正确的代码来为悬停的 .body 显示相应的 .desc。

更新：因此，考虑到更新答案中的标记，我可能会像这样重写处理程序：

$('.body').hover( function() {
  $(this).siblings('.desc').toggle();
} );

更新2：要在单击和活动上具有相同的行为是有点棘手，因为一旦您将鼠标移出 .body，即使您单击 .desc，它也会隐藏。不过可行...我会尝试这个：

var showFunc = function() { $(this).attr('rel', 'open').siblings('.desc').show(); };
$('.body')
  .click( showFunc )
  .focus( showFunc )
  .hover(
    function() {
      // don't update 'rel' attribute
      $(this).siblings('.desc').show();
    },
    function() {
      // here's the tricky part, if the rel attr is set
      // then dont hide, otherwise, go ahead
      if( $(this).attr('rel') == 'open' ) {
        $(this).siblings('.desc').hide();
      }
    }
  );

所以这将使得只需悬停即可像以前一样隐藏/显示，但如果您单击它将“粘”打开。在这种情况下，您可能希望显示处理程序也隐藏其他打开的 .desc，这样您就不会出现大量打开的内容。因此，也许 showFunc 应该是：

var showFunc = function() {
  $("." + $(this).className).attr('rel', '');
  $(this).attr('rel', 'open').siblings('.desc').show();
};

... 这将简单地清除先前单击/聚焦元素上的所有其他 rel 属性。我确信这仍然需要调整，但希望它能为您指明正确的方向。

Answer 2

你的脚本有效。

http://jsfiddle.net/y8wPw/

-update-
根据使用的 JQuery 版本，您的脚本以不同的方式工作。在 JQuery 1.3.2 中，当鼠标悬停在 .body 范围上时，.desc 范围将显示，但当鼠标离开它时不会消失。下次当鼠标进入.body时。该脚本反转其操作并隐藏 .desc。因此，每次您将鼠标悬停在第一个跨度上和关闭时，它都会运行脚本一次。

在 JQuery 1.4.2 中显然有一个更新，使 .desc 在鼠标悬停时显示，但在鼠标移开时立即隐藏。我想这就是你正在寻找的。

Answer 3

如果您希望能够仅显示特定 .body 元素的 .desc 元素，您可以使用以下内容：

HTML

<div class='body'>Body content<span class='desc'>description</span></div>
<div class='body'>Body content<span class='desc'>description</span></div>
<div class='body'>Body content<span class='desc'>description</span></div>

jQuery

$(document).ready(function() {
    $(".body").hover(function () {
        $(this).find(".desc").toggle();
    })
})

CSS

.desc {
    display: none;
}

希望有帮助