所以我正在为WP创建一个主题,菜单正在起作用。我想下拉菜单在后面会以某种方式重叠,有时当我将鼠标悬停在一个项目上时,它的子菜单会打开,但是当我将curses移到其子菜单时,它旁边的项目的子菜单会打开。
示例:
有什么想法吗?
我注意到,当我将鼠标悬停在顶级菜单项上超过2秒钟,然后将光标移到子菜单时,就不会发生毛刺。
经过大量的挖掘之后,我发现,当我将鼠标悬停在顶级菜单项上时,我的主题(Divi)将添加一个类,当我将光标移动到另一个菜单时,该类已删除,但有一定的延迟,因此当我将鼠标悬停在新的顶级菜单项上时,先前悬停的菜单项仍会附加有该类大约1秒钟。
我在主题的文件中找到了以下代码,我认为这是应该怪的,但是我尝试将200更改为0,并且仍然在发生延迟(我正在跟踪使用鼠标悬停时要添加和删除的类Chrome上的DevTools):
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 );
}
};
答案 0 :(得分:1)
您是否曾经尝试过将z-index
悬停?像这样:
.item {
z-index: 0;
&:hover {
z-index: 1;
}
}
我现在正在猜测没有要用作参考的代码。