我想实现一个工具提示字典chrome扩展。当用户将鼠标悬停在文本上的一个块或一个单词上时,它将显示块选择或更改其背景颜色,并在单词下方显示工具提示。
我该如何实施?
我刚刚对background
做过类似的事情:
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' || srcElement.nodeName == 'SPAN') {
// 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;
}