Question

我有2个跨度。

第一个：<span class="body"> 第二个：<span class="desc">

我的CSS：

.desc {display: none;}

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

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

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

UPDATE！

正如@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元素。

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

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

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

Update2 ：要在点击和活动中使用相同的行为有点棘手，因为只要您.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

...它将简单地清除之前点击/聚焦元素上的所有其他{{1}}属性。我确信这仍然需要调整，但希望它指出你正确的方向。

Answer 2

你的脚本有效。

http://jsfiddle.net/y8wPw/

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

在JQuery 1.4.2中，显然有一个更新使.desc显示鼠标悬停，但在鼠标输出时立即隐藏。我认为这就是你要找的东西。

Answer 3

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

<强> 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;
}

希望有所帮助

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

UPDATE！

3 个答案: