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

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