鼠标悬停时突出显示 DOM 元素，就像检查一样

Question

我们有一个书签，用户单击一个按钮，然后需要启动像 highligther 这样的检查。我们希望这是跨浏览器的。

为此，我们需要在鼠标移动期间检测 DOM 元素，一旦我们有了这个元素，我们需要用 CSS 突出显示。

我们在通过鼠标移动检测 DOM 元素时遇到问题，您能指导我们如何完成此操作吗？

一旦我们有了这个 DOM 元素，在用户单击时我们需要提取 XPath。

Answer 1

您可以将

mousemove

挂在

document

或

document.body

上，然后使用事件对象的

target

属性来找出鼠标悬停在最上面的元素。然后向其应用 CSS 可能最简单的方法是向其添加一个类。

很容易认为

:hover

psuedo 类可以在没有 JavaScript 的情况下做到这一点，但我正在努力了解如何将其仅应用于“最深”的悬停元素（例如，在

<p>x<em>y</em>z</p>

中，仅应用于

em

而不是

p

）。

这是一个使用 JavaScript 的示例（不是

:hover

）：

let prev = null;

document.body.addEventListener(
    "mouseover",
    (event) => {
        if (event.target === document.body || (prev && prev === event.target)) {
            return;
        }
        if (prev) {
            prev.classList.remove("highlight");
            prev = null;
        }
        if (event.target) {
            prev = event.target;
            prev.classList.add("highlight");
        }
    },
    false
);

.highlight {
    background-color: yellow;
}

<p>I'm a paragraph, with <strong>some strong text</strong>, and some <em>emphasized text</em>.</p>
<p>I'm another paragraph.</p>
<div>Here's a div</div>

Answer 2

在jquery的帮助下你可以做这样的事情

$('*').hover(
    function(e){
        $(this).css('border', '1px solid black');
        e.preventDefault();
        e.stopPropagation();
        return false;
    },function(e){
        $(this).css('border', 'none');
        e.preventDefault();
        e.stopPropagation();
        return false;
    }
);

通过您的书签中的此代码，您可以加载任何代码

javascript:function loadScript(src){f=document.createElement('script');if(f){f.setAttribute("type","text/javascript");f.setAttribute("src",src);document.getElementsByTagName("head")[0].appendChild(f);}};loadScript("yourscripturl");