在我到达链接之前，下拉菜单就消失了

Drop down menu disappearing before I get to the links

本文关键字：下拉菜单 消失了 链接      更新时间：2023-09-26

查看此页面菜单中的tour链接。当我把鼠标悬停在tour上时，它应该显示菜单，让我选择要点击的子菜单，但它消失得太快了。

这是菜单的代码：

$('.menu > li > a').filter(function(){
    if( $(this).siblings('ul').length ){ return true; }
}).hover(function(){ 
    $(this).siblings('ul').fadeIn(150); },function(){ 
    $(this).siblings('ul').fadeOut(150); }
);



有人知道为什么会发生这种情况吗？

这似乎很容易：

$('.menu > li').hover(
    function(){ 
        $(this).find('ul').fadeIn(150);
    },
    function(){
        $(this).find('ul').fadeOut(150);
    }
);

或者，对于迟钝的老板：

$('.menu > li > a').mouseenter(function(){ $(this).siblings('ul').fadeIn(150); });
$('.menu > li').mouseleave(function(){ $(this).children('ul').fadeOut(150); });

尝试

$('.menu > li > a').filter(function(){
    if( $(this).siblings('ul').length ){ return true; }
}).mouseenter(function(){ 
    $(this).siblings('ul').fadeIn(150); }
).mouseleave(function(){ 
    $(this).siblings('ul').fadeOut(150); })

150毫秒是一个非常短的时间段。请使用更长的时间段。

.hover(function(){ 
    $(this).siblings('ul').fadeIn(1500); },function(){ 
    $(this).siblings('ul').fadeOut(1500); }
);

您可能还想在将鼠标悬停在子菜单上时将其淡入。。。您需要更改选择器（引用整个列表项，而不是仅引用链接）。

示例
http://jsfiddle.net/E4EjZ/

// INIT
$('.menu > li > ul').hide();
$('.menu > li').hover(function(){
    $(this).find('ul').fadeIn(1500); },function(){
    $(this).find('ul').fadeOut(1500); }
);

您可以尝试在鼠标悬停时淡入，在鼠标悬停后淡出，而不是使用onhover。这可能更适合你的情况，让你对每一个单独的事件都有更多的控制权。看看这里发布的例子。

如果你把鼠标指针放在"tour"链接上，你会发现它不会消失。但当你们把鼠标移离一个元素时，它就会消失，就像它应该消失的那个样

如果您将hover与父li元素一起使用，它将适用于整个容器，其中包括"tour"链接和您正在淡出的子菜单。

相关文章：