Google chrome extension Google Chrome扩展：突出显示鼠标悬停的div

我是谷歌Chrome扩展的新手，正在尝试编写一个扩展，突出显示悬停时的

div

。如果在另一个

div

内部有一个

div

，并且内部

div

处于悬停状态，我只想突出显示内部

div

---

我已经完成了一些示例，但我不确定如何捕获悬停事件。

在HTML中，每个鼠标事件都可以访问底层元素。使用JavaScript可以很容易地做到这一点，HTML5中有一个很好的特性（感谢Chromium的Erik），它允许您轻松地从DOM中添加和删除类

首先，你可以通过谷歌Chrome浏览器实现这一点。该算法非常简单，您保留一个指向上次访问的DOM的指针，并且在访问另一个DIV元素时只需添加/删除类

在您的manifest.json中，我们将为我们看到的每个页面定义CSS和JS注入

 ...
  ...
  "content_scripts": [
    {
      "matches": ["http://*/*"],
      "css": ["core.css"],
      "js": ["core.js"],
      "run_at": "document_end",
      "all_frames": true
    }
  ]
  ...
  ...

现在让我们看看我们的core.js，我已经加入了一些注释来解释发生了什么：

// Unique ID for the className.
var MOUSE_VISITED_CLASSNAME = 'crx_mouse_visited';

// Previous dom, that we want to track, so we can remove the previous styling.
var prevDOM = null;

// Mouse listener for any move event on the current document.
document.addEventListener('mousemove', function (e) {
  var srcElement = e.srcElement;

  // Lets check if our underlying element is a DIV.
  if (srcElement.nodeName == 'DIV') {

    // For NPE checking, we check safely. We need to remove the class name
    // Since we will be styling the new one after.
    if (prevDOM != null) {
      prevDOM.classList.remove(MOUSE_VISITED_CLASSNAME);
    }

    // Add a visited class name to the element. So we can style it.
    srcElement.classList.add(MOUSE_VISITED_CLASSNAME);

    // The current element is now the previous. So we can remove the class
    // during the next iteration.
    prevDOM = srcElement;
  }
}, false);

现在，让我们看看样式的简单core.css：

.crx_mouse_visited {
  background-color: #bcd5eb !important;
  outline: 1px solid #5166bb !important;
}

---

就是这样，您会注意到所有div都将有一个“悬停”状态，类似于您在检查元素时访问浏览器检查器时发生的情况。

@pdknsk为每个元素设置此值的方法是，对于主体的

onload

事件，运行以下代码：

bod= document.body;
walker = document.createTreeWalker(bod,NodeFilter.SHOW_ELEMENT,null,false);
while (walker.nextNode()){
    walker.currentNode.addEventListener("mouseover",on,false);
    walker.currentNode.addEventListener("mouseout",off,false);
}

并按如下方式修改开和关：

on=function(elem){ oldBG = this.style.backgroundColor;
                   this.style.backgroundColor='#123456';
                   this.addEventListener("mouseout",function(){this.style.backgroundColor= oldBG},false);
}

需要注意的是，只有使用

元素.style

对象设置样式时，这才有效，为了使其更健壮，您需要获取

元素.style.cssText

并处理（使用regex）并修改它

---

总而言之，穆罕默德·曼苏尔的答案是实现这一目标的最佳途径。

现在是2018年，这个问题提出已经7.5年了。 然而，这个问题仍然是相关的，并且由提供的答案是最好的

然而，我希望对它进行一些优化，通过对https的支持实现现代化，并为整个Chrome扩展提供完整的文档

mannifest.json imageMarker.js 在下面的示例中，我用虚线轮廓标记页面中的图像（IMG标记）。并避免对当前图像进行冗余处理

// Unique ID for the className.
var MOUSE_VISITED_CLASSNAME = 'crx_mouse_visited';

// Previous dom, that we want to track, so we can remove the previous styling.
var prevDOM = null;

// Mouse listener for any move event on the current document.
document.addEventListener('mousemove', function (e) {
    let srcElement = e.srcElement;

    // Lets check if our underlying element is a IMG.
    if (prevDOM != srcElement && srcElement.nodeName == 'IMG') {

        // For NPE checking, we check safely. We need to remove the class name
        // Since we will be styling the new one after.
        if (prevDOM != null) {
            prevDOM.classList.remove(MOUSE_VISITED_CLASSNAME);
        }

        // Add a visited class name to the element. So we can style it.
        srcElement.classList.add(MOUSE_VISITED_CLASSNAME);

        // The current element is now the previous. So we can remove the class
        // during the next ieration.
        prevDOM = srcElement;
        console.info(srcElement.currentSrc);
        console.dir(srcElement);
    }
}, false);

imageMarker.css

---

回答得好，只是我会用

大纲

替换

边框

，添加边框会移动元素。还有

！可能需要css上的重要信息。谢谢serg！编辑了这篇文章以反映你的评论：）谢谢穆罕默德，你的回答帮助我分配了。请看下面我的改进。
// Unique ID for the className.
var MOUSE_VISITED_CLASSNAME = 'crx_mouse_visited';

// Previous dom, that we want to track, so we can remove the previous styling.
var prevDOM = null;

// Mouse listener for any move event on the current document.
document.addEventListener('mousemove', function (e) {
    let srcElement = e.srcElement;

    // Lets check if our underlying element is a IMG.
    if (prevDOM != srcElement && srcElement.nodeName == 'IMG') {

        // For NPE checking, we check safely. We need to remove the class name
        // Since we will be styling the new one after.
        if (prevDOM != null) {
            prevDOM.classList.remove(MOUSE_VISITED_CLASSNAME);
        }

        // Add a visited class name to the element. So we can style it.
        srcElement.classList.add(MOUSE_VISITED_CLASSNAME);

        // The current element is now the previous. So we can remove the class
        // during the next ieration.
        prevDOM = srcElement;
        console.info(srcElement.currentSrc);
        console.dir(srcElement);
    }
}, false);

.crx_mouse_visited {
    background-clip: #bcd5eb!important;
    outline: 1px dashed #e9af6e!important;
}