当选择自动完成中的第一项时，jQuery mouseleave将触发

Question

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

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

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

现在 - 如果我从浏览器自动完成中选择第一个建议，则会触发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");
}