Question

当我将鼠标悬停在图像上时，我想要一个onverlay出现一些我选择的随机HTML。我希望叠加层完全覆盖图像。

我知道我的问题是什么，但我不确定如何解决它。我的问题是，当我通过悬停在图像上创建叠加层时，我不再盘旋在图像上，我将悬停在新创建的叠加层上。这使得图像上的 mouseleave 事件比想要的更快。当我离开叠加层时，我真的希望它能够触发。我似乎无法让 mouseleave 事件在叠加选择器上工作。

小提琴：https://jsfiddle.net/05a0838e/6/

我对任何类型的修复建议持开放态度：CSS，JS，插件或其中的混合。我只需要像我在JSFiddle中那样创建叠加层的内容：

$(this).after("<div class='team-overlay-mask'><div class='team-overlay-border'><div class='team-overlay-content-wrap text-center'><h2>" + name + "</h2><h4>" + title + "</h4></div></div></div>");

我尝试过的一些没有运气的事情：

$(".team-overlay-mask").mouseleave(function(){
     $(this).remove();
});

初始悬停事件中的

event.stopPropagation（）; 。

Answer 1

您是否可以将mouseleave方法更改为以下内容？

  $(".wrap").mouseleave(function() {
    $('.team-overlay-mask', this).remove();
  });

https://jsfiddle.net/5u2qzekm/

图像叠加切换

1 个答案: