Question

我想要实现的是使“选择检查”功能类型像浏览器一样。它仅应具有创建临时元素的功能，该元素将覆盖在鼠标悬停的元素上。

我创建了一个截屏视频，向您展示它的状态以及当前的状态。

我的代码

function create_div(){
  let style = `
 background-color: rgba(130, 180, 230, 0.5);
 outline: solid 1px #0F4D9A;
 box-sizing: border-box;
 position: absolute;
 display: block;
 z-index: 999999;
`
  let e = document.createElement('DIV')
  e.setAttribute('id', 'tester')
  e.setAttribute('style', style)
  document.body.appendChild( e )
}
create_div()


$( "body" ).mousemove(function( event ) {
  $( '#tester' ).css({'display' : 'none'})
  let target = $( event.target )
  $( '#tester' ).css({'display' : 'block', "width": target.width(),
 'height': target .height(), 'top' : target .offset().top,
 'left' : target .offset().left});
})

这是我用jQuery编写的代码它在页面上创建DIV，然后在mousemove事件中，设置其值（高度，宽度和位置）与我所徘徊的元素相同但是当我将鼠标悬停在上方时，会得到一些毛刺的窗户。

我在这里想念什么？

Answer 1

您需要在pointer-events: none;的CSS中添加#tester-这将使DIV对鼠标事件透明。这是为了避免鼠标悬停

要杀死另一个可能的故障源，我们只需将您处理过的最后一个目标保存在某个地方，这样就无需再次调整大小/重新绘制#tester。

它将导致：

function create_div(){
    $("body").append(
        $("<div id=\"tester\"></div>").css({
            "background-color": "rgba(130, 180, 230, 0.5)",
            "outline": "solid 1px #0F4D9A",
            "box-sizing": "border-box",
            "position": "absolute",
            "display": "block",
            "z-index": "999999",
            "pointer-events": "none"
        })
     );
}

$(document).ready(create_div);

$("body").mousemove(function( event ) {
    let target = $(event.target)
    if (target.length === 0){
        $("#tester").css({
            "display" : "none"
        });
        $("#tester").data("target", null);
    }else if(
        $("#tester").data("target") === null || 
        $("#tester").data("target") !== target 
    ){
        $("#tester").data("target", target);
        $("#tester").css({
            "display" : "block", 
            "width"   : target.width(),
            "height"  : target.height(), 
            "top"     : target.offset().top,
            "left"    : target.offset().left
        });
    }
    // else {leave #tester with no changes}
});

如何修复应使用CSS突出显示所选区域的代码

1 个答案: