基于鼠标事件用JavaScript切换导航图标URL的问题排查

问题根源 #

1. 函数名冲突：你使用的hover是浏览器原生方法，自定义同名函数会导致执行异常
2. 选择器定位错误：document.querySelector(".wrapper-naviagtion-icons")会选中页面所有该类元素，无法精准定位当前悬停导航项对应的图标容器
3. 语法错误：JavaScript设置backgroundImage时，URL部分缺少括号，正确格式应为url(...)

修复后的代码实现 #

模板部分（Twig）

<a class="nav-link main-navigation-link"
   href="{{ category_url(category) }}"
   itemprop="url"
   onmouseenter="navIconHover(this)"
   onmouseleave="navIconUnhover(this)"
   {% if treeItem.children|length > 0 %}data-flyout-menu-trigger="{{ category.id }}"{% endif %}
   {% if category_linknewtab(category) %}target="_blank"{% endif %}
   title="{{ name }}">
    <div class="main-navigation-link-text">
        <div class="container">
            <div class="wrapper-navigation-container">
                <div class="wrapper-naviagtion-icons"
                     style="background: url({{ category.customFields.twt_modern_pro_custom_field_set__category_navigation_icon_desktop_url }}) no-repeat;"
                     data-hover-url="{{ category.customFields.twt_modern_pro_custom_field_set__category_navigation_icon_desktop_url_hover }}">
                </div>
            </div>
            {% set navigation_split_title = name|split('&') %}
            <div class="wrapper-naviagtion-text-links">
                <span itemprop="name"><b>{{ navigation_split_title[0]|upper }}</b></span><br>
                <span itemprop="name">{{ navigation_split_title[1]|upper }}</span>
            </div>
        </div>
    </div>
</a>

全局脚本（放在页面底部或外部JS文件）

function navIconHover(el) {
    // 通过当前a标签定位对应图标容器
    const iconContainer = el.querySelector(".wrapper-naviagtion-icons");
    const hoverUrl = iconContainer.dataset.hoverUrl;
    iconContainer.style.backgroundImage = `url(${hoverUrl})`;
}

function navIconUnhover(el) {
    const iconContainer = el.querySelector(".wrapper-naviagtion-icons");
    // 从初始样式中提取原始图标URL
    const originalUrl = iconContainer.style.backgroundImage.match(/url\((.*?)\)/)[1];
    iconContainer.style.backgroundImage = `url(${originalUrl})`;
}

更优雅的事件委托方案（推荐） #

如果页面存在多个导航项，用事件委托可避免重复绑定事件，提升性能：

模板调整（移除内联事件）

<a class="nav-link main-navigation-link"
   href="{{ category_url(category) }}"
   itemprop="url"
   {% if treeItem.children|length > 0 %}data-flyout-menu-trigger="{{ category.id }}"{% endif %}
   {% if category_linknewtab(category) %}target="_blank"{% endif %}
   title="{{ name }}"
   data-original-url="{{ category.customFields.twt_modern_pro_custom_field_set__category_navigation_icon_desktop_url }}"
   data-hover-url="{{ category.customFields.twt_modern_pro_custom_field_set__category_navigation_icon_desktop_url_hover }}">
    <!-- 其余内容保持不变 -->
</a>

全局脚本

document.addEventListener('DOMContentLoaded', function() {
    // 替换为你的导航父容器选择器
    const navContainer = document.querySelector('.main-navigation');
    navContainer.addEventListener('mouseenter', function(e) {
        const link = e.target.closest('.main-navigation-link');
        if (!link) return;
        const iconContainer = link.querySelector('.wrapper-naviagtion-icons');
        iconContainer.style.backgroundImage = `url(${link.dataset.hoverUrl})`;
    });

    navContainer.addEventListener('mouseleave', function(e) {
        const link = e.target.closest('.main-navigation-link');
        if (!link) return;
        const iconContainer = link.querySelector('.wrapper-naviagtion-icons');
        iconContainer.style.backgroundImage = `url(${link.dataset.originalUrl})`;
    });
});

内容的提问来源于stack exchange，提问作者Max H.