jQuery：尽管来自input元素的浏览器提议，仍然保持悬停状态

Question

我有一个嵌套的ul列表给出的导航，就像这个

一样

<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继续悬停？

Answer 1

作为解决方案如果未输入event.target，则可以删除类.showMenu 当下拉列表隐藏时，也会模糊输入

$('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/