javascript - 在图像上叠加 div

Question

我正在尝试在图像上叠加 DIV。我正在使用 mouseenter 和 mouseleave 事件执行此操作。我正在使用 Knockout 进行数据绑定(bind)。

<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，但行为是相同的。

Answer 1

您还需要将 mouseleave 绑定(bind)到覆盖层。并在开始 hideOverlay() 检查指针是否正在进入叠加层(从图像)或图像(从叠加层)，如果它然后通过返回停止函数，检查您是否可以使用 event.relatedTarget