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

Question

我们有一个书签工具，用户点击按钮后需要高亮显示像检查器一样的东西。我们希望这能够跨浏览器使用。

为此，我们需要在鼠标移动期间检测DOM元素，并且一旦获得此元素，我们需要用CSS进行突出显示。

我们在通过鼠标移动来检测DOM元素方面存在问题，请问如何解决？

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

- Ionut Flavius Pogacian

---

你有尝试过什么吗？你有任何代码吗？ - Mike Sav

我们已经找到了如何提取标签的XPath，详见我的其他问题。 - Ionut Flavius Pogacian

Answer 1

你可以在 document 或 document.body 上挂钩 mousemove 事件，然后使用事件对象的 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";
    }
  }

})();

现场演示 | 源代码

- T.J. Crowder

---

这个 :hover 类可以用于任何HTML DOM 元素吗？并且在所有浏览器中都能工作吗？您知道它是否支持旧版本，例如FF 3.5和IE7吗？ - Ionut Flavius Pogacian

@IonutFlaviusPogacian: :hover确实适用于IE7或更高版本中的任何元素（在IE6中仅支持锚点）。但是我需要仔细考虑如何构建CSS。如果您只想突出显示鼠标悬停在最上层的元素，则仅使用body *:hover { ... }可能不够。 - T.J. Crowder

这是一个可以展示类似东西的jsfiddle示例：http://jsfiddle.net/MBujm/。请忽略jQuery，它不是必要的。 - Esailija

@Esailija和T.J.Crowder，请查看这个相关问题Mouseover事件在IE9中不会对子元素进行细分，事件在IE8上不会启动。 - Pentium10

非常有用，但我需要里面的iframe不起作用。请问是否有人可以帮忙？ - SekDinesh

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

- James

---

你知道如何使用普通的 JavaScript 实现这个吗？在书签脚本中加载 JQuery 有些棘手。 - Ionut Flavius Pogacian

我刚刚编辑了我的答案，你可以使用一个书签代码来加载一个包含jQuery的大型代码，然后做任何你想做的事情。 - James

在末尾更改 yourscripturl - James

哇！这太棒了，现在你可以用书签脚本做更多的事情了！然而，我也怀疑它可能有点危险，因为它会打开更多的安全漏洞，不是吗？ - Adrian

@Adrian，除非您故意加载了恶意脚本或者有人劫持了您的URL并在其中添加了他们的恶意脚本，否则它是一个安全漏洞。 - James

@James：小建议。最好将任何现有边框保留到一个变量中，而不是将边框设置为“none”。否则它会继续删除元素的现有边框 :-) - Tharaka Deshan