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回调中只需使用$（this）.find来查找其中的div。

在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之后继续对hover效果进行处理。

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

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

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

Answer 4

我认为这个解决方案可能有点整洁。还有一个fiddle。

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

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

在悬停在具有相同类的div组中的单个div上显示叠加

4 个答案: