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

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元素在a .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:在click和active上有相同的行为有点棘手,因为只要你鼠标移除.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();
      }
    }
  );

所以这将使它像以前一样悬停隐藏/显示,但是如果你点击它将"坚持"打开.在这种情况下,您可能希望显示处理程序也隐藏其他打开的.descs,以便您不会结束大量开放的.所以也许showFunc应该是:

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

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