将鼠标悬停在元素上的jQuery仍然保留了悬停类。当鼠标悬停时，应删除此类样式

Question

当鼠标悬停在.login-content上时，我希望login-btn保持其悬停状态。我已经尝试过，现在它显示并隐藏悬停的div，但login-btn在悬停时忽略悬停状态，而悬停时.login-content消失。

更新：
目前的问题是，如果鼠标悬停在登录后直接关徘徊..而不是悬停在子元素中，.hovered风格保持。这不应该是这样。

的HTML如下：

   <li><a href="#" class="login-btn">Login</a> 
        <div class="login-content"> 
         <form name="login-form" action="" method="post"> 
          <input type="email" name="email" value="" placeholder="E-mail" /> 
          <input type="password" name="password" value="" placeholder="Password" /> 
          <input type="submit" name="login" value="Login" class="form-login" /> 
         </form> 
        </div> 
       </li> 

jQuery的代码如下：

$(document).ready(function() { 

$(".login-btn").hover(
    function() { 
     clearTimeout($(this).data('hoverTimeoutId')); 
     $(".login-content").show(); 
     $(this).addClass('hovered'); 
    }, 
    function() { 
     clearTimeout($(this).data('hoverTimeoutId')); 
     $(this).data('hoverTimeoutId', setTimeout(function() { 

      $(this).removeClass('hovered'); 
      $(".login-content").hide(); 
     } ,500)); 
    }); 


$('.login-content').hover(
    function(){  
     clearTimeout($(".login-btn").data('hoverTimeoutId')); 
    },  
    function(){  
     $(".login-content").hide(); 
     $(".login-btn").removeClass('hovered'); 
    }); 
}); 

该网页也可以在http://www.domainandseo.com/portfolio/1may/index.html发现是否需要任何进一步的调试。

感谢

Answer 1

尝试

$(".login-btn").hover(
    function() { 
     clearTimeout($(this).data('hoverTimeoutId')); 
     $(".login-content").show(); 
     $(this).addClass('hovered'); 
    }, 
    function() { 
     clearTimeout($(this).data('hoverTimeoutId')); 
     $(this).data('hoverTimeoutId', setTimeout(function() { 
      $(".login-content").hide(); 
      $(this).removeClass('hovered'); 
     } ,500)); 
    }); 


$('.login-content').hover(
    function(){  
     clearTimeout($(".login-btn").data('hoverTimeoutId')); 
    },  
    function(){  
     $(".login-content").hide(); 
     $(".login-btn").removeClass('hovered'); 
    }); 

而不是使用:hover psedoclass的使用像hover类分配悬停STA在演示显示TE到 login-btn

演示：Fiddle

Answer 2

使用setTimeout

$(".login-btn").hover(
function() { 
    clearTimeout($(this).data('animator')); 
    $(this).data('animator', setTimeout(function() { 
     $(".login-content").show(); 
    } ,1000)); 
}, 
function() { 
    clearTimeout($(this).data('animator')); 
    $(this).data('animator', setTimeout(function() { 
     $(".login-content").hide(); 
    } ,1000)); 
}); 

http://jsfiddle.net/uDm64/

Answer 3

如果你不想操心具有光标离开了一会儿用户，那么我建议多一点状态检查。

另外，如果你希望你的按钮出现徘徊，在你的CSS选择器 '的.login-BTN：悬停'，将其更改为： '的.login-BTN：悬停和.login-btn.hover'

小提琴：http://jsfiddle.net/qhAus/

(function() { 
    var timer = 0, 
     open = false, 
     loginBtn = $('.login-btn'), 
     loginContent = $('.login-content'), 
     startTimeout = function(state, duration) { 
      timer = setTimeout(function() { 
       timer = 0; 
       loginContent[state](); 
       open = state === 'show'; 

       if(!open) { 
        // If it's closed, remove hover class 
        loginBtn.removeClass('hover'); 
       } 
      }, duration || 1000); 
    }; 

    loginBtn.hover(function(e) { 
     $(this).addClass('hover'); 

     if(open && timer) { 
      // If about to close but starts to hover again 
      clearTimeout(timer); 
     } 

     if(!(open || timer)) { 
      // Don't start to open again if already in the process 
      startTimeout('show'); 
     } 
    }, function() { 
     // When not hovering anymore, hide login content 
     startTimeout('hide', 2000); 
    }); 

    loginContent.mousemove(function(e) { 
     // If cursor focus on the login content, stop any closing timers 
     if(timer) { 
      clearTimeout(timer); 
     } 
    }); 

    loginContent.mouseleave(function(e) { 
     // When cursor leaves login content, hide it after delay 
     startTimeout('hide'); 
    }); 

})();