javascript - 将鼠标悬停在同一类 div 集中的单个 div 上时显示叠加层

Question

假设我有 4 个动态生成的 div，每个都具有相同的类和唯一的编号 ID，就像这样。每个都包含一个具有 100% 宽度和高度的绝对定位的 div，因此在显示时，它会填充整个 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 中，我猜您不会那样做。