图像叠加切换

Question

当我将鼠标悬停在图像上时，我希望出现一个叠加层，其中包含我选择的一些随机 html。我希望叠加层正好覆盖在图像上。

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

Fiddle: 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/

图像叠加切换

Image overlay toggling

css

jquery

overlay