[英]Overlay div over an image
我正在尝试在图像上叠加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时开始闪烁,然后一次又一次地进入mouseent。 我也尝试使用mouseleave和mouseout,但是行为是相同的。
您还需要将mouseleave绑定到叠加层。 并在开始hideOverlay()时检查指针是进入叠加层(来自图像)还是进入图像(来自叠加层),然后通过返回停止函数,以检查是否可以使用event.relatedTarget
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.