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

Question

假设我有4个动态生成的div，每个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应该消失了。 关于如何使用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

里面mouseenter回调只是用$（本）.find到里面找到只有股利。

添加mouseleave回调中mouseenter回调是一个坏主意。 每次鼠标进入父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 2

id将其重写为：

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

您要连接的mouseleave里面mouseenter ，我想你不惯于说。

Answer 3

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

为了解决这个问题，我取代了原来mouseenter和mouseleave事件有one这是类似on ，但只有一次的事件捕获。

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

然后，我将mouseenter事件放入mouseleave以便在离开活动div之后可以继续mouseleave进行hover效果。

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

如果您对仅CSS解决方案感兴趣：

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

Answer 4

我认为此解决方案可能会更简洁一些。 也要摆弄 。

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

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