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

jQuery: How-to toggle display on hover

提问by Ploughansen

I have 2 spans.

我有 2 个跨度。

First one: <span class="body">Second one: <span class="desc">

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

My CSS:

我的CSS：

.desc {display: none;}

What I want to do, is show the second span, when hovering the first. No fancy effects or anything, just show the span. I know there is a simple jQuery solution out there, but I'm new to jQuery so I'd appreciate some help finding it. ;)

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

This is what I have so far. Is the syntax correct?

这是我到目前为止。语法正确吗？

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

UPDATE!

更新！

As @thenduks pointed out, this results in every .descelement to show when a .bodyis hovered. As you can probably imagine, I have several .bodyand .descand I only want the corresponding .descto show on hovering the .body.

正如@thenduks 指出的那样，这会导致每个.desc元素在 a.body悬停时显示。正如你可能想象，我有几个.body和.desc我只是想对应的.desc显示上徘徊.body。

This is part of my markup: (the whole site is still just local, so I can't give you an url to test - sorry)

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

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

回答by rfunduk

This will result in hovering over any.bodyelement showing all.descelements.

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

If you post your actual markup we can figure out the proper code to show a corresponding .descfor a hovered .body.

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

Update: So, given the markup in the updated answer I'd probably re-write the handler like so:

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

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

Update2: To have the same behavior on click and active is a bit tricky because as soon as you mouseout of the .bodythe .descwill hide even if you clicked on it. Doable though... I'd try this:

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();
      }
    }
  );

So this will make it so that just hovering hides/shows as before, but if you click it will 'stick' open. In this case you'd probably want the show handler to also hide other open .descs so that you wont end up tons of open ones all over. So maybe showFuncshould be:

所以这将使它像以前一样悬停隐藏/显示，但如果你点击它会“坚持”打开。在这种情况下，您可能希望 show 处理程序也隐藏其他 open ，.desc这样您就不会在整个过程中出现大量打开的。所以也许showFunc应该是：

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

... which will simply clear all other relattributes on previously clicked/focused elements. I'm sure this would still need tweaking, but hopefully it points you in the right direction.

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

回答by Stephan Muller

Your script works.

你的脚本有效。

http://jsfiddle.net/y8wPw/

http://jsfiddle.net/y8wPw/

-update- Your scripts works in different ways according to the JQuery version used. In JQuery 1.3.2 the .descspan will show when you mouseover the .bodyspan, but will not disappear when the mouse leaves it. Next time when the mouse enters .body. The script reverses it's action and hides the .desc. So every time you hover on and off the first span, it'll run the script once.

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

In JQuery 1.4.2 apparently there's been an update that makes the .descshow up on mouseover, but hide immediately on mouseout. I think this is what you were looking for.

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

回答by Ant Ali

If you want to be able to just show the .descelement of a specific .bodyelement you can use the following:

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

HTML

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

jQuery

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

CSS

CSS

.desc {
    display: none;
}

Hope that helps

希望有帮助