Наложение div над изображением

Question

Я пытаюсь наложить DIV на изображение. Я делаю это с помощью событий mouseenter и mouseleave. Я использую Knockout для привязки данных.

<ul class="gallery" data-bind="foreach: images"> 
     <li> 
      <img data-bind="attr: {src:tUrl},event: {mouseenter: $parent.showOverlay, mouseleave: $parent.hideOverlay}" /> 
     </li> 
</ul> 

<div class="list-overlay overlay"> 
    <img src="/Content/images/play.png" /> Watch 
</div> 

Javascript:

showOverlay: function (data, event) { 
     var position = $(event.currentTarget).position(); 
     var height = $(event.currentTarget).innerHeight(); 
     var width = $(event.currentTarget).innerWidth(); 

     $(".list-overlay").css("top", parseInt(position.top) + parseInt(height) - 40); 
     $(".list-overlay").css("left", position.left); 
     $(".list-overlay").css("width", width) 
     $(".list-overlay").show(); 

    }, 
    hideOverlay: function() { 
     $(".list-overlay").hide(); 
    } 

Приведенный выше код работает отлично, чтобы показать наложение. Если я начну перемещать мышь на оверлей, она начнет мерцать, так как она снова и снова запускает мышь, а затем мышь. Я также пытался использовать mouseleave и mouseout, но поведение такое же.

Answer 1

Вам также необходимо привязать мышь к оверлею. И при запуске hideOverlay() проверьте, входит ли указатель в оверлей (из изображения) или изображение (из наложения), если он затем останавливает функцию, возвращаясь, чтобы проверить, что вы можете использовать event.relatedTarget