1

我有几个 div 向左浮动，每个都有一个 CHILD DIV 应该隐藏在鼠标上。它仅适用于第一个容器/父 div。对于其他它没有。

我希望实现，当鼠标悬停父 DIV 子 div 隐藏时，在 mouseout 子 div 上出现。这应该适用于所有容器/父 div，*当悬停任何 div1 隐藏所有 div2 时，我不是在寻找 :)。功能必须部分适用于每个容器。

小提琴

HTML：

<div id="div1">
    <div id="div2">asdsds</div>
</div>
<div id="div1">
    <div id="div2">asdsds</div>
</div>
<div id="div1">
    <div id="div2">asdsds</div>
</div>

<div class="clear"></div>

jQuery：

$(function() {
      $('#div2').show();
      $('#div1').hover( function() { $('#div2').fadeToggle(); } );
});

请帮忙！

4

5 回答 5

2

使用类而不是id. 您只能拥有任何给定 ID 中的一个。

试试这个：

<div class="div1"><div class="div2">asdsds</div></div>
<div class="div1"><div class="div2">asdsds</div></div>
<div class="div1"><div class="div2">asdsds</div></div>

<div class="clear"></div>

<script>
    $(function() {
      $('.div1').hover( function() {
          $(this).find('.div2').fadeToggle();
      } );
    });
</script>
于 2013-04-02T20:56:14.020 回答
1

使用 jQuery 时，ID 必须是唯一的。对于组，请改用类名。

于 2013-04-02T20:55:05.147 回答
1

正如每个人已经说过的，id 应该是唯一的，你绝对应该使用 classes。话虽如此，您可以通过更改选择器以包含标记名来“作弊”，即：

$(function() {
      $('div#div2').show();
      $('div#div1').hover( function() {
          $(this).find('div#div2').fadeToggle();
      } );
});

即使您的 id 不是唯一的，这在大多数浏览器中也应该有效，因为它会改变底层的选择过程。

另请注意，您必须使用.find()（或类似方法）仅切换作为当前悬停项目的子元素的元素 - 您会注意到我$(this).find(...在悬停处理程序中使用。

演示：http: //jsfiddle.net/nnnnnn/T7USy/12/

但我真的不推荐“作弊”方法，您绝对应该更改您的 html 标记以不具有重复的 id：

<div class="div1">
    <div class="div2">asdsds</div>
</div>
<!-- etc -->

随着您的 CSS 和 JS 的相应更改：

  $('.div1').hover( function() {
      $(this).find('.div2').fadeToggle();
  } );

演示：http: //jsfiddle.net/nnnnnn/T7USy/16/

于 2013-04-02T21:01:53.773 回答
0

主要问题是您重复了 ID。您应该为此任务使用类：

$('.div2').show();
$('.div1').hover(function() {
    $('.div2', this).stop().fadeToggle();
});

另一个问题：$('#div2').fadeToggle();。您可能希望一次只切换一个 div，当前处于悬停状态，因此您应该提供一个上下文：

$('.div2', this).stop().fadeToggle();

或者

$(this).find('.div2').stop().fadeToggle();

http://jsfiddle.net/T7USy/13/

于 2013-04-02T21:00:16.450 回答
0

问题是您使用了太多的 id，但这里有一种方法可以解决您的特定问题。这使用以选择器开头：

<div id="up1">
    <div id="sub1">asdsds</div>
</div>
<div id="up2">
    <div id="sub2">asdsds</div>
</div>
<div id="up3">
    <div id="sub3">asdsds</div>
</div>

和jQuery：

$(function() {
      $('[id^=sub]').show();
      $('[id^=up]').hover( function() { $('[id^=sub]').fadeToggle(); } );
});

这将显示/隐藏每个相应的元素。

希望这可以帮助

于 2013-04-02T21:01:52.240 回答