Is there a way to highlight an element with a border without causing it to shift? The script seems a bit glitchy when detecting mouse leaving the area.
I'm unable to override parent element properties like border or outline. I also can't use pseudo-classes with position: absolute due to potential differences in position values on the parent element.
For example, selecting top questions causes the button to align differently.before and after
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);