Bildüberlagerung umschalten

Question

Wenn ich mit der Maus über ein Bild fahre, möchte ich ein Onverlay mit zufälligem HTML meiner Wahl anzeigen. Ich möchte, dass das Overlay genau über dem Bild liegt.

Ich weiß, was mein Problem ist, aber ich bin mir nicht sicher, wie es zu beheben ist. Mein Problem ist, dass wenn ich das Overlay vom Schweben auf dem Bild erzeuge, ich nicht länger über dem Bild schwebe, ich schwebe auf dem neu erstellten Overlay. Dies macht das mouseleave Ereignis auf dem Bild Feuer früher als gewünscht. Ich möchte wirklich, dass es feuert, wenn ich das Overlay verlasse. Und ich kann nicht scheinen, das mouseleave Ereignis auf dem Überlagerungsselektor zu arbeiten.

Fiddle: https://jsfiddle.net/05a0838e/6/

Ich bin offen für jede Art von Anregungen für ein fix: CSS, JS, Plugins oder eine Mischung davon. Ich muss nur in der Lage, den Inhalt des Overlay zu erstellen, wie ich in meinem JSFiddle haben:

$(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>"); 

Einige Dinge, die ich ohne Glück versucht haben:

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

event.stopPropagation() ; innerhalb des initialen Hover-Ereignisses.

Answer 1

Können Sie einfach die mouseleave Methode ändern, um wie folgt zu sein?

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

https://jsfiddle.net/5u2qzekm/