Question

我正在尝试在鼠标悬停所有元素上创建叠加效果。我写了这个js代码，它适用于大多数场景，并在某些条件下失败。

JS代码

$(function() {
    var overlay = $("<div id='overlay'></div>").css({position:"absolute","display":"none","background":"red"});
        $("body").append(overlay);
        $("body").on("mouseover", function(e) {
            var t = e.target;
            var offset = $(t).offset();
            var top = offset.top;
            var left = offset.left;
            var scrollx = $(window).scrollTop();
            var scrolly = $(window).scrollLeft();
            top -= scrolly;
            left -= scrollx;
    console.log(overlay);              overlay.css({"top":top,"left":left,"width":"50px","height":"2px"});
            overlay.show();
        });

});

JS Fiddle

https://fiddle.jshell.net/go2j4fk7/12/show/light/

失败条件

尝试在iframe中鼠标悬停元素。我使用$（“iframe”）。contents（）。mouseover（）来绑定事件。
如果父元素有滚动
如果元素处于固定位置。

如何为任何元素创建叠加层？

在javascript中获取元素的绝对位置

0 个答案: