jQuery：尽管来自输入元素的浏览器提议，但仍保持悬停答案

【问题标题】：jQuery: Keep hovering despite browser proposal from input elementjQuery：尽管来自输入元素的浏览器提议，但仍保持悬停
【发布时间】：2017-06-16 10:23:40
【问题描述】：

我有一个这样的嵌套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 继续悬停？

【问题讨论】：

没有<input type='pass'> 使用<input type='password'> 作为密码字段。您可以使用 autocomplete="off" 隐藏建议
@XYZ 是的，你的权利是错字。感谢自动完成的提示。它不起作用，因为 MF 在此输入元素上触发 Login Manager storage module，但我将把它作为一个不同的问题发布。我仍然会对仍然可以使用自动完成功能的解决方案感兴趣。

标签： javascript jquery html css hover

【解决方案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/

【讨论】：

非常感谢！！好主意！