css 如何在不覆盖样式的情况下高亮显示当前元素

dwbf0jvd  于 2023-06-25  发布在  其他
关注(0)|答案(2)|浏览(112)

我想用边框突出显示一个元素。问题是,如果我们向元素添加一个 Package 器(带边框),它会稍微移动元素。如果我们在页面上运行这个脚本,我们可以看到它(使用开发工具)。脚本有点小故障,因为我有麻烦检测鼠标何时离开该区域。
我不能覆盖父元素属性,如(border,outline)我不能使用{position:在{position:before/after {position:绝对值,含量:“",边框:....}(因为位置值可以在父元素上不同)
例如,我们选择顶部问题,按钮与文本对齐。beforeafter

document.addEventListener('mousemove', e => {
    var element = document.elementFromPoint(e.clientX, e.clientY);
    if (element.id === "_wrapper" || element.parentNode.id === "_wrapper" || element.tagName === "HTML" || element.tagName === "BODY") return;
    var parent = element.parentNode;
    var wrapper = document.createElement("div");
    wrapper.id = "_wrapper";
    
    // set the wrapper as child (instead of the element)
    parent.replaceChild(wrapper, element);
    // set element as child of wrapper
    wrapper.appendChild(element);
}, {passive: true})
 
document.addEventListener("mouseout", e => {
    var element = e.target
    if (element.id === "_wrapper") {
        // remove wrapper
        element.replaceWith(...element.childNodes)
        // element.outerHTML = element.innerHTML;
        // element.replaceChild(element.parentNode, element)
        // console.log(element, element.parentNode)
    }
})

var style = document.createElement('style');
style.innerHTML = `
#_wrapper {
    border: 1px solid;
}
`;
document.head.appendChild(style);
n8ghc7c1

n8ghc7c11#

试试这个方法。它会将“border size”包含在元素的总大小中,这样它就不会对元素以前的大小做任何改变。

#_wrapper {
    border: 1px solid;
    box-sizing: border-box;
}
hgncfbus

hgncfbus2#

首先,在代码的第1行,你有一个错字:“mouseove
第二:
。。。它把元素移动了一点。。
使用*{box-sizing:border-box},防止边框改变元素的宽度/高度。
下面是一个代码片段,我在所有的CSS中使用它来防止类似的事情(你可能也应该这样做):

* {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  list-style: none;
  text-decoration: none;
  box-sizing: border-box;
}

body {
  overflow-x: hidden;
}

相关问题