在具有相同类的一组 div 中悬停在单个 div 上时显示覆盖

Question

假设我有 4 个动态生成的 div，每个都有相同的类和唯一的编号 id，就像这样。每个都包含一个绝对定位的 div，其宽度和高度为 100%，因此当显示时，它会填满整个 div。

<div class="my_class" id="1">
    <div class="overlay"></div>
</div>

<div class="my_class" id="2">
    <div class="overlay"></div>
</div>

<div class="my_class" id="3">
    <div class="overlay"></div>
</div>

<div class="my_class" id="4">
    <div class="overlay"></div>
</div>



<style>
    .overlay {
        display:none;
    }
</style>

当我将鼠标悬停在其中一个 div 上时，我希望该 div 和其他任何 div 都不显示覆盖，然后当我停止悬停时，覆盖 div 应该消失。关于如何使用 jquery 执行此操作的任何想法？这是我尝试过的。

$('document').ready(function(){
  $('.my_class').mouseenter(function(){
    var id = $(this).attr("id");
    $("#"+ id +" div").fadeTo("fast", 1);
    $("#"+ id +" div").mouseleave(function(){
      $("#"+ id +" div").fadeTo("fast", 0);          
    });
  });
});

Answer 1

我把它改写成这样的：

$('document').ready(function(){
 $('.my_class').mouseenter(function(){$(this).fadeTo("fast", 1);});
 $('.my_class').mouseleave(function(){$(this).fadeTo("fast", 0);});
});

您将mouseleave 附加到mouseenter 中，我猜您不会那样做。

Answer 2

在mouseenter 回调中，只需使用 $(this).find 即可仅查找其中的 div。

在mouseenter 回调中添加mouseleave 回调是个坏主意。每次鼠标进入父 div 时都会添加一个新的回调。

这是你想要做的吗？

http://jsfiddle.net/2R3Yt/

$('document').ready(function () {
    $('.my_class').mouseenter(function () {
        var id = $(this).attr("id");
        $(this).find("div").fadeTo("fast", 1);
    });

    $('.my_class').mouseleave(function () {
        $(this).find("div").fadeTo("fast", 0);
    });
});

Answer 3

我认为这个解决方案可能会更简洁一些。还有一个fiddle。

$('.my_class').mouseenter(function() {
    $(this).children('.overlay').fadeTo(1000, 0);
})

$('.my_class').mouseleave(function() {
    $(this).children('.overlay').fadeTo(1000, 1);
})

Answer 4

但是，原始代码对我有用；如果您在divs 之间不规则地移动光标，则事件会不断淡入和淡出叠加层。

为了解决这个问题，我将原来的 mouseenter 和 mouseleave 事件替换为 one，这与 on 类似，但只捕获一次事件。

$('.my_class').one('mouseenter', function() {...});
$('.my_class').one('mouseleave', function() {...});

然后我将mouseenter 事件放在mouseleave 中，这样我们就可以在离开活动div 后继续执行hover 效果。

http://jsfiddle.net/q8qFy/4/

如果您有兴趣CSS 唯一的解决方案：

http://jsfiddle.net/EsVLC/1/