WordPress/WooCommerce网站Elementor下拉菜单悬停时消失问题求助

AI 小北

2026-7-16

解决Elementor下拉菜单鼠标下移消失的问题

方案1：调整元素层级与菜单触发范围

给Collections菜单的下拉面板添加自定义CSS，确保层级高于产品图片，同时扩大鼠标触发区域：

.elementor-nav-menu--dropdown {
    z-index: 9999 !important;
    padding-bottom: 20px; /* 增加底部内边距，避免鼠标移出菜单触发范围 */
}

降低产品图片容器的层级，防止它干扰菜单的hover状态：

.woocommerce-product-gallery__image {
    z-index: 1 !important;
}

方案2：修复hover事件的触发逻辑

如果是鼠标移到图片上时菜单hover状态丢失，用JS延迟关闭菜单，给鼠标移动留缓冲时间：

jQuery(document).ready(function($) {
    const $collectionMenu = $('.menu-item-collections');
    const $dropdown = $collectionMenu.find('.elementor-nav-menu--dropdown');
    const $productImage = $('.woocommerce-product-gallery__image');

    // 鼠标进入菜单或图片区域时，保持下拉菜单显示
    $collectionMenu.add($productImage).hover(function() {
        $dropdown.addClass('elementor-active');
    }, function() {
        setTimeout(function() {
            // 仅当鼠标同时离开菜单和图片时才关闭菜单
            if (!$collectionMenu.is(':hover') && !$productImage.is(':hover')) {
                $dropdown.removeClass('elementor-active');
            }
        }, 200);
    });
});