选择自动完成的第一项时，jQuery Mouseleave会发射

Question

这里已经有一个类似的问题，但解决方案并没有帮助我。 to the question

我有一个 li，里面是一个 div。在那个 div 里面是一个登录表单。

如果我将鼠标悬停在 li 上，则 div 会通过 jQuery 出现。

现在 - 如果我从浏览器自动完成中选择第一个建议，则会触发 mouseleave 并且 div 消失。但它只是在第一个建议。如果我从中选择第二个或第三个建议，则只要所选建议在 div 之内/之上（很明显），div 就会保留并且一切正常。

jQuery: 1.10.2 在 Chrome 中测试 40.0.2214.111 m

$(document).on("mouseenter", "li.menu-item", function() {
    $(this).addClass("hover");
}).on("mouseleave",  "li.menu-item", function() {
    $(this).removeClass("hover");
});

li{
    padding-left: 0;
    float:left;
    width:100px;
    list-style: none;
}

ul li.menu-item .login-layer{
    display:none;
    width:100px;
    height:100px;
    border:1px solid #000;
}

ul li.menu-item.hover .login-layer{
    display:block;
}

input{
    width:100px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<ul>
    <li class="menu-item">
        <p>login</p>        
        <div class="login-layer">
            <form>
                <input type="text" placeholder="E-Mail" id="email" name="login" class="EMAIL"/><br/>
            </form>
        </div>
    </li>
</ul>

http://jsfiddle.net/adzrn7tt/

Answer 1

如果您的输入是焦点，则添加一个条件：

if(!$('input').is(':focus')) {
    $(this).removeClass("hover");
}