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

Posted 2023-05-08

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

【英文标题】：Show overlay on hover over single div in set of divs with same class

【发布时间】：2014-07-19 16:52:18

【问题描述】：

假设我有 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);          
    );
  );
);

【参考方案1】：

我把它改写成这样的：

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

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

【参考方案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);
    );
);

【参考方案3】：

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

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

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

【参考方案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/

【讨论】：

我应该补充一下，我的代码确实有效，但是在快速移动鼠标时出现故障。