Question

我正在制作一个下拉（导航）菜单。当用户将鼠标悬停在“DROP”按钮上时，另一个名为“MENU”的div在其下面淡入，这将是菜单。如何保持显示div“MENU”，因为当用户将鼠标从按钮上移开时它会消失。这是jQuery代码：

$("#DROP").hover(
  function () {
    $('#MENU').fadeIn('fast');
  }, 
  function () {
    $('#MENU').fadeOut('fast');
  }
);

当鼠标悬停在屏幕上时，如何显示“MENU”？然后褪色，当鼠标熄灭时。同时，如果用户没有将鼠标放在它上面，请确保“MENU”消失。

Answer 1

添加此代码，它应该可以解决问题。

$('#MENU').hover(function () {
     $('#MENU').stop(); // stops current animation
     $('#MENU').show();
   },
   function () {
      $('#MENU').fadeOut('fast');
   }
);

Answer 2

您应该将#MENU设为#DROP的子元素，因此在光标同时离开#DROP和#MENU之前，不会触发mouseout事件。有关示例，请参阅http://jsfiddle.net/jAHs2/2/。

另一种选择可能是使用setTimeout / clearTimeout的组合来调用fadeOut函数，以便在用户悬停子菜单时取消它。

Answer 3

尝试订阅另外一个这样的功能，

var isInsideDrop = false;
$('#MENU').hover(function () {
     isInsideDrop = true; 
 $('#MENU').fadein('fast');
   },
   function () {
      $('#MENU').fadeOut('fast');
   }
);


 $('#MENU').mouseover(function(){
    if(isInsideDrop){
       $('#MENU').show();isInsideDrop = false;
    }
   });'

Answer 4

我相信一种解决方案是为淡出效果添加延迟。 1-2秒应该足够长。

$("#DROP").hover(
    function () {
    $('#MENU').fadeIn('fast');
}, 

function () {
    $('#MENU').delay(2000).fadeOut('fast');
});

创建下拉菜单时如何使用.hover保持菜单可见

4 个答案: