所以我正在为 WP 创建一个主题,并且菜单正在运行。我想下拉菜单在后面以某种方式重叠,有时当我将鼠标悬停在一个元素上时,它的子菜单会打开,但是当我将 curses 移到它的子菜单时,它旁边的元素的子菜单会打开。
例子:
有什么想法吗?
编辑:
我注意到,当我将鼠标悬停在顶级菜单项上超过 2 秒,然后将光标移向子菜单时,故障不会发生。
经过大量挖掘后我发现,一旦我将鼠标悬停在顶级菜单项上,我的主题 (Divi) 就会添加一个类,当我将光标移动到另一个时,类被删除,但有一定的延迟,所以当我将鼠标悬停在一个新的顶级菜单项上时,之前悬停的菜单项仍然附加了大约 1 秒的类。
我在主题文件中发现了以下代码,我认为这是罪魁祸首,但是我尝试将 200 更改为 0,但延迟仍在发生(我正在跟踪正在添加和删除的类,因为我悬停使用Chrome 上的开发者工具):
window.et_pb_toggle_nav_menu = function($element, state, delay) {
if ( 'open' === state ) {
if ( ! $element.closest( 'li.mega-menu' ).length || $element.hasClass( 'mega-menu' ) ) {
$element.addClass( 'et-show-dropdown' );
$element.removeClass( 'et-hover' ).addClass( 'et-hover' );
}
} else {
var closeDelay = typeof delay !== 'undefined' ? delay : 200;
$element.removeClass( 'et-show-dropdown' );
$element.removeClass( 'et-touch-hover' );
setTimeout( function() {
if ( ! $element.hasClass( 'et-show-dropdown' ) ) {
$element.removeClass( 'et-hover' );
}
}, closeDelay );
}
};
最佳答案
您是否尝试过在悬停时使用 z-index
?像这样的东西:
.item {
z-index: 0;
&:hover {
z-index: 1;
}
}
我猜现在没有代码可以用作引用。
关于javascript - WordPress 下拉菜单重叠 - 悬停一个打开另一个,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55983183/