我是新手,正在尝试编写一个Google Chrome扩展程序,它可以在鼠标悬停时突出显示一个 div
。如果有一个div
位于另一个div
内部,并且鼠标悬停在内部的div
上,我希望仅突出显示内部的div
。
我已经使一些示例工作起来了,但是我不确定如何捕获鼠标悬停事件。
我是新手,正在尝试编写一个Google Chrome扩展程序,它可以在鼠标悬停时突出显示一个 div
。如果有一个div
位于另一个div
内部,并且鼠标悬停在内部的div
上,我希望仅突出显示内部的div
。
我已经使一些示例工作起来了,但是我不确定如何捕获鼠标悬停事件。
...
...
"content_scripts": [
{
"matches": ["http://*/*"],
"css": ["core.css"],
"js": ["core.js"],
"run_at": "document_end",
"all_frames": true
}
]
...
...
// 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);
.crx_mouse_visited {
background-color: #bcd5eb !important;
outline: 1px solid #5166bb !important;
}
现在是2018年,这个问题被提出已经过去了7.5年。然而,这个问题仍然很重要,mohamed-mansour 提供的答案是最好的。
但我希望对它进行一些优化,支持https,并为整个Chrome扩展提供完整的文档。
{
"name": "Mark active image",
"version": "1.11",
"description": "Mark image with dashed frame.",
"permissions": [
"activeTab",
"declarativeContent"
],
"content_scripts": [
{
"matches": [
"http://*/*",
"https://*/*"
],
"css": [
"imageMarker.css"
],
"js": [
"imageMarker.js"
]
}
],
"manifest_version": 2
}
我在下面的示例中使用虚线轮廓标记页面上的图像(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);
.crx_mouse_visited {
background-clip: #bcd5eb!important;
outline: 1px dashed #e9af6e!important;
}
@pdknsk 你可以为每个元素设置这个,方法是在 body 的 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);
}
element.style
对象设置样式的情况,并且为了使其更加健壮,您需要获取element.style.cssText
并处理(使用正则表达式)和修改它。