Question

查看this page上菜单中的游览链接。当我将鼠标悬停在巡视上时，它应该显示菜单并让我选择我希望点击哪个子菜单但它消失得太快。

这是菜单的代码：

$('.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); }
);

任何人都知道为什么会这样吗？

Answer 1

这似乎很简单：

$('.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); });

Answer 2

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); }
);

Answer 3

尝试

$('.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); })

Answer 4

您可以尝试淡出鼠标并淡出鼠标，而不是使用onhover。这可能对您的情况更有效，并让您更好地控制每个单独的事件。查看发布的here示例。

Answer 5

如果您将鼠标指针放在“游览”链接上，您将看到它不会消失。但是当你将鼠标从一个元素移开时，它就会消失，就像它应该的那样。

如果您使用悬停与父li元素，它将适用于整个容器，其中包括'tour'链接和您正在淡入的子菜单。

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

5 个答案: