Javascript 将div覆盖在图像上
我试图在图像上叠加一个DIV。我使用mouseenter和mouseleave事件来实现这一点。我正在使用Knockout进行数据绑定Javascript 将div覆盖在图像上,javascript,jquery,css,Javascript,Jquery,Css,我试图在图像上叠加一个DIV。我使用mouseenter和mouseleave事件来实现这一点。我正在使用Knockout进行数据绑定 <ul class="gallery" data-bind="foreach: images"> <li> <img data-bind="attr: {src:tUrl},event: {mouseenter: $parent.showOverlay, mouseleave: $parent
<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>
上面的代码可以很好地显示覆盖。如果我开始在覆盖层上移动鼠标,它会在一次又一次地发射mouseleave和mouseenter时开始闪烁。我也试过使用mouseleave和mouseout,但行为是一样的 您还需要将mouseleave绑定到覆盖层。在开始hideOverlay时,检查指针是从图像中输入覆盖还是从覆盖中输入图像,如果是,则通过返回停止该功能,以检查您是否可以使用event.relatedTarget,但当鼠标移出图像而根本不进入覆盖时,我必须隐藏覆盖。我的覆盖图没有占据整个图像。
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();
}