將鼠標懸停在元素上的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'); 
    }); 

})();