分享一个悬浮到块上显示颜色修改的代码片段,功能如题。
应用场景:需要聚焦的任何场景(复盘、核对...)
// 函数用于高亮悬浮元素或其父元素
function highlightElement(element, highlightedElements) {
if (!element.getAttribute('data-node-id') &&
element.parentElement &&
element.parentElement.getAttribute('data-node-id')) {
element = element.parentElement;
}
if (highlightedElements.length > 0) {
resetHighlightedElements(highlightedElements);
}
element.originalBackgroundColor = element.style.backgroundColor;
var customRGBAColor = 'rgba(55, 255, 164, 0.4)';
element.style.backgroundColor = customRGBAColor;
highlightedElements.push({ element: element, originalBackgroundColor: element.originalBackgroundColor });
}
// 函数用于恢复高亮元素的背景颜色
function resetHighlightedElements(highlightedElements) {
highlightedElements.forEach(function(elementInfo) {
elementInfo.element.style.backgroundColor = elementInfo.originalBackgroundColor;
});
highlightedElements.length = 0; // 清空数组
}
function setupHoverEffect(targetContainer) {
var highlightedElements = [];
// 添加鼠标悬浮事件处理程序
targetContainer.addEventListener('mouseover', function(event) {
var hoveredElement = event.target;
if (hoveredElement === targetContainer) {
return;
}
highlightElement(hoveredElement, highlightedElements);
});
// 添加鼠标移出事件处理程序
targetContainer.addEventListener('mouseout', function(event) {
if (event.target !== this) {
resetHighlightedElements(highlightedElements);
}
});
}
function observeDOMForTargetContainer() {
var hoverEffectObserver = new MutationObserver(function(mutationsList) {
for(var mutation of mutationsList) {
if (mutation.type === 'childList' || mutation.type === 'attributes') {
var targetContainer = document.querySelector('.protyle-wysiwyg[data-doc-type="NodeDocument"]');
if (targetContainer && !targetContainer.__hoverEffectSet) {
setupHoverEffect(targetContainer);
targetContainer.__hoverEffectSet = true;
}
}
}
});
hoverEffectObserver.observe(document.body, {
childList: true,
attributes: true,
subtree: true, // 观察整个DOM树的变化
});
}
// 执行代码
observeDOMForTargetContainer();
console.log('开始观察DOM变化并为目标容器设置悬浮效果。');
如果你觉得不好看,直接修改 var customRGBAColor = rgba(55, 255, 164, 0.4);
,换上你喜欢的颜色。
附带效果视频
欢迎来到这里!
我们正在构建一个小众社区,大家在这里相互信任,以平等 • 自由 • 奔放的价值观进行分享交流。最终,希望大家能够找到与自己志同道合的伙伴,共同成长。
注册 关于