[js] 鼠标悬浮块，显示特定的背景颜色（js，非 CSS）

分享一个悬浮到块上显示颜色修改的代码片段，功能如题。

应用场景：需要聚焦的任何场景（复盘、核对...）

// 函数用于高亮悬浮元素或其父元素
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);，换上你喜欢的颜色。

附带效果视频