Laravel中悬停菜单图标加载的HTML元素几秒后消失问题

问题根源 #

你的代码中，当图标没有related-id（仅显示文本提示）时，执行了emptyCorner.textContent = tooltipText;，这行代码会完全清空emptyCorner内的所有子元素（包括预渲染好的资源列表<div>）。第一次显示文本提示后，后续再悬停带related-id的图标时，document.getElementById(relatedId)会返回null，自然无法加载对应的列表。

修复方案 #

步骤1：新增文本提示容器 #

在emptyCorner内添加一个专门用于显示文本提示的容器，避免直接覆盖清空子元素：

<div class="empty-corner">
    {{-- 新增文本提示容器 --}}
    <div class="tooltip-text" style="display:none;"></div>

    {{-- 原有资源列表容器保持不变 --}}
    @isset($screen->screenEResources)
        <div id="resources-list" style="display:none;">
            @include('partials._resourceList', ['list' => $screen->screenEResources])
        </div>
    @endif

    @isset($screen->screenVideo)
        <div style="display:none;" id='screen-video'>
            @include('partials._resourceList', ['list' => $screen->screenEResources])
        </div>
    @endif

    @isset($screen->screenAudio)
        <div style="display:none;" id='screen-audio'>
            <audio controls>
                <source src="{{ asset($screen->screenAudio) }}" type="audio/mpeg">
            </audio>
        </div>
    @endif
    @isset($screen->screenInfography)
        <div style="display:none;" id='screen-infography'>
            <img width="95%" height="315" src="{{ asset($screen->screenInfography) }}">
        </div>
    @endif
</div>

步骤2：修改JavaScript逻辑 #

切换文本容器的显示/隐藏，而非直接替换emptyCorner内容：

const iconContainers = document.querySelectorAll(".wrapper-logo-toolbar");
const emptyCorner = document.querySelector(".empty-corner");
const tooltipTextEl = emptyCorner.querySelector(".tooltip-text");
let tooltipTimeout;

iconContainers.forEach(iconContainer => {
    iconContainer.addEventListener("mouseenter", function() {
        const tooltipText = iconContainer.getAttribute("data-tooltip");
        const relatedId = iconContainer.getAttribute("related-id");
        const relatedItem = document.getElementById(relatedId);

        // 隐藏所有子元素
        [...emptyCorner.children].forEach(child => {
            child.style.display = 'none';
        });

        if (relatedItem === null) {
            // 显示文本提示
            tooltipTextEl.textContent = tooltipText;
            tooltipTextEl.style.display = 'block';
        } else {
            // 显示对应资源列表
            relatedItem.style.display = 'block';
        }

        emptyCorner.style.opacity = 1;
        clearTimeout(tooltipTimeout);
    });

    iconContainer.addEventListener("mouseleave", function() {
        const relatedId = iconContainer.getAttribute("related-id");
        const relatedItem = document.getElementById(relatedId);
        
        tooltipTimeout = setTimeout(() => {
            emptyCorner.style.opacity = 0;
            if (relatedItem != null) relatedItem.style.display = 'none';
            tooltipTextEl.style.display = 'none';
        }, 200);
    });
});

emptyCorner.addEventListener("mouseenter", function() {
    if (emptyCorner.style.opacity != 0) {
        clearTimeout(tooltipTimeout);
        emptyCorner.style.opacity = 1;
    }
});

emptyCorner.addEventListener("mouseleave", function() {
    tooltipTimeout = setTimeout(() => {
        emptyCorner.style.opacity = 0;
        tooltipTextEl.style.display = 'none';
    }, 200);
});

额外优化建议 #

• 用CSS类控制显示/隐藏，比如定义.hidden { display: none; }，替代直接操作style.display，提升代码可维护性。
• 统一related-id的引号格式（当前混合使用单双引号），保持代码一致性。

内容的提问来源于stack exchange，提问作者Juan Pablo Arango Lizcano