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

Question

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

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

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

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

Answer 1

您可以勾mousemove上document或document.body，然后使用target事件对象的属性找出鼠标所在的最顶层元素。然后将 CSS 应用到它可能最容易通过添加一个类来完成。

但我想知道:hover伪类是否可以为你省点麻烦……

如果不使用:hover，这里有一个例子：

(function() {
  var prev;

  if (document.body.addEventListener) {
    document.body.addEventListener('mouseover', handler, false);
  }
  else if (document.body.attachEvent) {
    document.body.attachEvent('mouseover', function(e) {
      return handler(e || window.event);
    });
  }
  else {
    document.body.onmouseover = handler;
  }

  function handler(event) {
    if (event.target === document.body ||
        (prev && prev === event.target)) {
      return;
    }
    if (prev) {
      prev.className = prev.className.replace(/\bhighlight\b/, '');
      prev = undefined;
    }
    if (event.target) {
      prev = event.target;
      prev.className += " highlight";
    }
  }

})();

现场复制| 来源

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");