Görüntü bindirme geçişi

Question

Bir resmin üzerine geldiğimde, bir seçimin rasgele html ile bir onverlay görünmesini istiyorum. Bindirmenin resmin üzerine uzanmasını istiyorum.

Sorunumun ne olduğunu biliyorum ama nasıl düzelteceğimi tam olarak bilmiyorum. Benim sorunum, görüntü üzerinde gezinmenin bindirmesini oluşturduğumda, artık resmin üzerine gelmem, yeni oluşturulan bindirmenin üzerine geldiğim. Bu, görüntü ateşinde mouseleave olayını istenenden daha erken yapar. Bindirmeyi terkettiğimde gerçekten ateş etmesini istiyorum. Ve bindirme selektörü üzerinde çalışmak için mouseleave olayını elde edemiyorum.

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

Ben bir düzeltme için önerilerin her türlü açığım: CSS, JS, Eklentiler, ya da o bir karışımı. Hayır şans ile denedim

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

Bazı şeyler:

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

Event.stopPropagation) (Benim JSFiddle içinde var gibi sadece bindirme içerik oluşturmak için gerekiyor ; İlk duraklama etkinliğinin içinde.

Answer 1

Aşağıdaki gibi olmak için mouseleave yöntemini değiştirebilir misiniz?

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

https://jsfiddle.net/5u2qzekm/