下拉菜单重复悬停

Question

我的metronic下拉菜单中的悬停事件有问题，当我将光标悬停在菜单按钮上时，悬停是正确的，但是当输入选项时菜单变成白色，我想这可能是由于它们被启动了两个造成的按钮同时激活，但当您删除其中一个或另一个时，它仍然会发生，或者进入菜单选项时激活被停用。

光标位于菜单按钮上

光标位于下拉菜单中的某个选项上

这是代码：

<div class="d-flex align-items-center ms-1 ms-lg-3">
    <div class="menu menu-column menu-gray-600 menu-active-primary menu-hover-light-primary fw-semibold w-30px h-30px w-md-40px h-md-40px" data-kt-menu="true">
        <!-- Menu item -->
        <div class="menu-item menu-item-calendar" data-kt-menu-trigger="hover" data-kt-menu-placement="bottom-end">
            <!-- Menu link -->
            <a href="#" class="btn btn-icon btn-active-light-primary btn-custom w-30px h-30px w-md-40px h-md-40px" data-kt-menu-trigger="{default:'click', lg: 'hover'}" data-kt-menu-attach="parent" data-kt-menu-placement="bottom-end">
                <span class="svg-icon svg-icon-1">
                    <svg width="24" height="24" viewBox="0 2 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <!-- SVG -->
                    </svg>
                </span>
            </a>
            <!-- Menu sub -->
            <div class="menu menu-sub menu-sub-dropdown menu-column menu-rounded menu-title-gray-700 menu-icon-muted menu-active-bg menu-state-color fw-semibold py-4 fs-base w-175px" data-kt-menu="true">
                <!-- Menu item: Local -->
                <div class="menu-item px-3 my-0">
                    <a href="<?= site_url('calendar') ?>" class="menu-link px-3 py-2">
                        <span class="menu-icon svg-icon svg-icon-1">
                            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                <!-- SVG -->
                            </svg>
                        </span>
                        <span class="menu-title">Local</span>
                    </a>
                </div>
                <!-- Menu item: Outlook -->
                <div class="menu-item px-3 my-0">
                    <a href="#" id="botonOutlook" class="menu-link px-3 py-2">
                        <span class="menu-icon svg-icon svg-icon-1">
                            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                <!-- SVG -->
                            </svg>
                        </span>
                        <span class="menu-title">Outlook</span>
                    </a>
                </div>
                <!-- Menu item: Google -->
                <div class="menu-item px-3 my-0">
                    <a href="#" id="botonGoogle" class="menu-link px-3 py-2">
                        <span class="menu-icon">
                            <img src="assets/media/logos/gmanu.png" width="25" height="25" class="google-icon" />
                        </span>
                        <span class="menu-title">Google</span>
                    </a>
                </div>
            </div>
        </div>
    </div>
</div>

我已经完成了另一个下拉菜单并且可以正常工作：

输入选项时保持第一次悬停。

这是代码：

<div class="d-flex align-items-center ms-1 ms-lg-3">
    <a href="#" class="btn btn-icon btn-active-light-primary btn-custom w-30px h-30px w-md-40px h-md-40px" data-kt-menu-trigger="{default:'click', lg: 'hover'}" data-kt-menu-attach="parent" data-kt-menu-placement="bottom-end">
        <span class="svg-icon theme-light-show svg-icon-1">
            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                <!-- SVG -->
            </svg>
        </span>
        <span class="svg-icon theme-dark-show svg-icon-1">
            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                <!-- SVG -->
            </svg>
        </span>
    </a>
    <div class="menu menu-sub menu-sub-dropdown menu-column menu-rounded menu-title-gray-700 menu-icon-muted menu-active-bg menu-state-color fw-semibold py-4 fs-base w-175px" data-kt-menu="true" data-kt-element="theme-mode-menu">
        <div class="menu-item px-3 my-0">
            <a href="#" class="menu-link px-3 py-2" data-kt-element="mode" data-kt-value="light">
                <span class="menu-icon" data-kt-element="icon">
                    <span class="svg-icon svg-icon-3">
                        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <!-- SVG -->
                        </svg>
                    </span>
                </span>
                <span class="menu-title"><?= lang('General.light') ?></span>
            </a>
        </div>
        <div class="menu-item px-3 my-0">
            <a href="#" class="menu-link px-3 py-2" data-kt-element="mode" data-kt-value="dark">
                <span class="menu-icon" data-kt-element="icon">
                    <span class="svg-icon svg-icon-3">
                        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <!-- SVG -->
                        </svg>
                    </span>
                </span>
                <span class="menu-title"><?= lang('General.dark') ?></span>
            </a>
        </div>
    </div>
</div>

非常感谢大家！

Answer 1

检查您的 CSS 文件中是否存在问题，以便我们解答，

但这可能成为解决方案：

用一个类创建一个外部 Div，并在 Javascript 中放置一个函数来显示或隐藏它。