Question

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

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

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

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

Answer 1

您可以在mousemove或document上挂钩document.body，然后使用事件对象的target属性找出鼠标所在的最顶层元素。然后通过向其添加一个类，可以最简单地将CSS应用到它。

但是我想知道:hover psuedo-class是否可以为你节省一些麻烦......

如果没有使用: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";
    }
  }

})();

Live copy | source

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

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

2 个答案: