jQuery在悬停时显示div，然后当用户将鼠标悬停在div上时隐藏它帮助吗? [英] Jquery show div on hover then when user hovers out of div hide it help?

问题描述

我有一个菜单，当我将鼠标悬停在div上显示的链接之一时.我希望用户能够将鼠标悬停在此div上，但是当用户将鼠标悬停在div之外时(我认为是mouseout)，我希望它隐藏.

I have a menu and when I hover one of the links a div shows. I want the user to be able to hover over this div but when the user hovers out of the div (mouseout i think its called) I want it to hide.

想象一下css中的下拉菜单，当用户将鼠标悬停在链接上或从链接中移出时，用户将鼠标悬停在链接上，并且显示子导航，而子导航将消失.怎么用jquery做到呢??

Imagine a dropdown menu in css, the user hovers over the link and the sub nav is shown, when the user hovers out or away from the link and sub nav the sub nav dissapears. How can this be done with jquery???

这就是我所拥有的:

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


 });

推荐答案

尝试如下操作:

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

如果您要附加一个具有例如ajax加载了内容，但是应该可以与css菜单一起很好地工作.

This code works particulary good if you want to append a div that has e.g. ajax loaded content, but it should very well work with your css menu.

希望这会有所帮助

这篇关于jQuery在悬停时显示div，然后当用户将鼠标悬停在div上时隐藏它帮助吗?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！