Question

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

我正在寻找，当鼠标悬停父DIV子div隐藏时，鼠标输出上出现子div。这个shouls适用于所有容器/父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(); } );
});

请帮忙！

Answer 1

使用类而不是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>

Answer 2

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

Answer 3

正如大家已经说过的那样，id应该是唯一的，你绝对应该使用类。话虽如此，您可以通过更改选择器来“欺骗”以包含标记名，即：

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

这应该适用于大多数浏览器，即使您的ID不是唯一的，因为它会更改基础选择过程。

另请注意，您必须使用.find()（或类似方法）才能切换当前悬停项目的子元素 - 您会注意到我在$(this).find(...内使用<div class="div1"> <div class="div2">asdsds</div> </div> 悬停处理程序。

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

但是我真的不建议使用“作弊”方法，你应该明确地将你的html标记更改为没有重复的id：

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

在CSS和JS中进行相应的更改：

{{1}}

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

Answer 4

主要问题是您复制了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/

Answer 5

问题是你使用了太多的id，但这是一种可以解决你的特定问题的方法。这使用starts with选择器：

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

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

希望这有帮助

鼠标上的jquery hide / show仅适用于一个div

5 个答案: