覆盖图像上的div

我正在尝试覆盖图像上的DIV。我正在使用mouseenter和mouseleave事件来做这件事。我正在使用Knockout进行数据绑定。覆盖图像上的div

<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，然后一次又一次地mouseenter。我也尝试使用mouseleave和mouseout，但行为相同。

来源

2014-09-20 user3731783

您还需要将mouseleave绑定到叠加层。并在开始时hideOverlay（）检查指针是否进入叠加层（来自图像）或图像（来自叠加层），如果是，则通过返回来停止该功能，以检查是否可以使用event.relatedTarget

来源

2014-09-20 03:17:24 user3035542

但是，当鼠标移出图像而不进行覆盖时，我必须隐藏覆盖图。我的覆盖图不占用完整的图像。 – user3731783 2014-09-20 03:31:05

覆盖图像上的div

回答

相关问题