Question

我有一个菜单，当我将其中一个链接显示为div时。我希望用户能够将鼠标悬停在div上，但是当用户将鼠标悬停在div之外时（我认为它被称为鼠标输出）我希望它隐藏起来。

想象一下css中的下拉菜单，用户将鼠标悬停在链接上并显示子导航，当用户徘徊或远离链接时子子导航消失。如何用jquery ???

完成

这就是我所拥有的：

 $(document).ready(function(){
 //when user hovers over plans the mainnavbottom is shown
$(".plans").hover(
    function() {
    $(".mainnavbottom").show("fast");
  }, function(){
    $(".mainnavbottom").mouseout.hide("slow");
  });


 });

Answer 1

尝试这样的事情：

$('.mainnavbottom').bind('mouseenter mouseleave', function(event) {
    switch(event.type) {
        case 'mouseenter':
           // when user enters the div
           $(".mainnavbottom").show("fast");
        break;
        case 'mouseleave':
          // leaves
          $(".mainnavbottom").hide("slow");
        break;
    }
});

如果你想附加一个div，那么这段代码特别有用。 ajax加载的内容，但它应该很好地使用您的CSS菜单。

希望这有帮助

Answer 2

尝试

 $(document).ready(function(){
      //when user hovers over plans the mainnavbottom is shown
      $(".plans").mouseover(function() {
           $(".mainnavbottom").show("fast");
      }).mouseout(function(){
           $(".mainnavbottom").hide("slow");
      });    
 });

Answer 3

您描述的是：鼠标悬停在计划上时显示：

$('.plans').live('mouseover mouseenter', function()
    {
       $(".mainnavbottom").show("fast"); 
    });

然后在mainnavbottom上将鼠标移出时隐藏：

$('.mainnavbottom').live('mouseout mouseleave', function()
  {
     $(".mainnavbottom").hide("slow"); 
  });

所以，这实际上就是两件不同的事情。

Jquery显示div在悬停然后当用户徘徊在div隐藏它帮助？

3 个答案: