jQuery的：保持懸停儘管輸入元素瀏覽器的建議

我有一個嵌套ul列表這樣jQuery的：保持懸停儘管輸入元素瀏覽器的建議

<ul id='mainNav'> 
<li> Some Stuff! 
    <ul> 
    <li>Page 1</li> 
    <li>Page 2</li> 
    </ul> 
</li> 
<li> Hover here to login! 
    <ul > 
    <li> 
    <div class='login'> 
     <p>Login</p> 
     <input type='password'> 
     <button>Okay</button> 
    </div> 
    </li> 
    </ul> 
</ul>

給予了導航和使用jQuery懸停時顯示的

$('ul#mainNav > li').hover(function() { 
    $(this).addClass("showMenu"); 
    }, 
    function(){ 
    $(this).removeClass("showMenu"); 
    } 
);

此菜單工作正常，除了登錄的輸入框。在將鼠標指針從輸入框移動到瀏覽器提議條目的那一刻，jQuery認爲一個人離開了li元素並刪除了類showMenu，以便子菜單消失。

所以，當我將鼠標懸停在li元素的登錄表單，只要我將鼠標懸停在瀏覽器建議打開

而且除了瀏覽器建議

的li元素自敗我還創建了一個jFiddle。

如何通過jQuery保持懸停如果我移動瀏覽器提案從輸入元素？

來源

2017-06-16 Adam

沒有'<輸入type ='pass'>'use''用於密碼字段。並且您可以使用autocomplete =「off」來隱藏暗示 – XYZ

@XYZ是的，您的權利是錯誤的。感謝提供自動完成的提示。它不起作用，因爲MF在此輸入元素上觸發了「登錄管理器存儲模塊」，但我會將其作爲一個不同的問題發佈。我仍然會對自動完成仍然可以使用的解決方案感興趣。 – Adam

作爲一種解決方案可以刪除類.showMenu如果event.target沒有輸入另外模糊輸入時下拉變得隱藏

$('ul#mainNav > li').hover(function(e) { 
 
    $(this).addClass("showMenu"); 
 
    }, 
 
    function(e) { 
 
    if (!$(e.target).is('input')) { 
 
     $(this).removeClass("showMenu"); 
 
     $('input').blur(); 
 
    } 
 
    });

#mainNav>li { 
 
    border: 3px solid #08C; 
 
    background-color: #FFF; 
 
    display: inline-block; 
 
} 
 

 
#mainNav li { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
#mainNav, 
 
#mainNav ul { 
 
    list-style: none; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
#mainNav li>ul { 
 
    position: absolute; 
 
    display: none; 
 
    z-index: 1; 
 
    min-width: 200px; 
 
    padding: 0px; 
 
    margin: 0px; 
 
    text-align: left; 
 
    background-color: #FFF; 
 
    box-sizing: border-box; 
 
} 
 

 
#mainNav li.showMenu>ul { 
 
    display: block 
 
} 
 

 
.login { 
 
    border: 3px solid #08C; 
 
    padding: 20px; 
 
    margin: 0 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<form method> 
 

 
    <ul id='mainNav'> 
 
    <li> Hover here to login! 
 

 
     <ul> 
 
     <li> 
 
      <div class='login'> 
 
      <p>Login</p> 
 
      <input type='password'> 
 
      <button> 
 
    Okay 
 
    </button> 
 
      </div> 
 

 
     </li> 
 
     </ul> 
 
    </ul> 
 
</form>

https://jsfiddle.net/dzt87zbk/

來源

2017-06-16 11:56:48 XYZ

非常感謝你！卓見！ – Adam

jQuery的：保持懸停儘管輸入元素瀏覽器的建議

回答

相關問題