jquery在鼠标悬停时隐藏/显示仅适用于一个div

我有几个div向左浮动，每个div都有一个子div，应该隐藏在鼠标上方。它仅适用于第一个容器/父分区。对于其他容器/父分区则不适用

我正在寻找一个方法，当鼠标越过父DIV子DIV隐藏时，mouseout子DIV出现。这应该适用于所有容器/父div，*我不想在悬停任何div1时查找所有div2:）。函数必须部分适用于每个容器

HTML:

---

请帮忙

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

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

使用类而不是

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>

asdsds
ASDSD
ASDSD
$（函数（）{
$（'.div1'）。悬停（函数（）{
$（this.find（'.div2'）.fadeToggle（）；
} );
});

使用类而不是

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>

asdsds
ASDSD
ASDSD
$（函数（）{
$（'.div1'）。悬停（函数（）{
$（this.find（'.div2'）.fadeToggle（）；
} );
});

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

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

另一个问题：

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

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

或

主要问题是您复制了ID。您应该使用类来完成此任务：

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

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

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

或

问题在于您使用了太多的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>

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

希望这对您有所帮助。问题是您使用了太多的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>

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

希望这能有所帮助
正如大家已经说过的那样，id应该是唯一的，你应该使用类来代替。话虽如此，您可以通过更改选择器以包含标记名来“作弊”，即：

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

即使您的id不是唯一的，但这在大多数浏览器中都应该有效，因为它会更改基本的选择过程

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

演示：

但我真的不建议使用“作弊”方法，您应该明确更改html标记，使其不具有重复的ID：

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

演示：
正如大家已经说过的那样，id应该是唯一的，您应该使用类来代替。尽管如此，您可以通过更改选择器以包含标记名来“作弊”，即：

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

即使您的id不是唯一的，但这在大多数浏览器中都应该有效，因为它会更改基本的选择过程

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

演示：

但我真的不建议使用“作弊”方法，您应该明确更改html标记，使其不具有重复的ID：

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

演示：
您不止一次地使用了ID div1/div2。ID应该总是用来唯一地标识元素。您不止一次地使用了ID div1/div2。ID应该总是用来唯一地标识元素。不仅仅是jQuery。事实上，计算中的大多数东西！在HTML5中，ID不必是唯一的。每次我开口说它们是唯一的ed是唯一的（由于问题的性质），我被HTML5的返回打了一巴掌。如果我使用class，它将隐藏h上的所有div2。@Diodeus-你对此有参考吗？我正在查看的HTML5参考说明ID必须是唯一的：（html5的变化在于，它对id可以具有的值的限制更少，例如，它现在可以以数字开头）。我要找出困难的方法：不仅仅是jQuery。事实上，计算中的大多数东西！html5 id不必是唯一的。每次我开口说它们需要是唯一的（由于问题的性质），我被HTML5的回归打了一巴掌。如果我使用class，它将隐藏h上的所有div2。@Diodeus-你有关于它的引用吗？我看到的HTML5引用说ID必须是唯一的：（HTML5中的变化是它对ID可以具有的值限制较少，例如，它现在可以以数字开头）.我要找出困难的方法：如果我使用class，它将隐藏h上的所有div2。我添加了您需要的内容。它看起来像迪斯科效果！：）事实上它是“工作的”对于之前的一个div，它是miss leading you。此代码中存在一个缺陷，因为您正在淡出浮动在左侧的元素。一旦它们消失，屏幕将更新，其他元素将向左移动。您应该淡入淡出内部div（div2）别管div1了。啊，我看到有人已经为你建立了这个答案。如果我使用class，它将隐藏h上的所有div2。我添加了你需要的。它看起来像迪斯科效果！：）事实上它是“工作的”对于之前的一个div，它是miss leading you。此代码中存在一个缺陷，因为您正在淡出浮动在左侧的元素。一旦它们消失，屏幕将更新，其他元素将向左移动。您应该淡入淡出内部div（div2）别管div1了。啊，我看到有人已经为你建立了这个答案。非常清晰，结构很好，很有帮助，这是最好的答案！谢谢！你应该编辑这个答案，简单地提供类实现，以避免混淆。非常清晰，结构很好，很有帮助