Наложение изображений наложения

Question

Когда я наводил изображение, я хочу, чтобы onverlay появлялся с некоторым случайным 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/