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

Question

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

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

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

现在 - 如果我 select 来自浏览器自动完成的第一个建议，mouseleave 被触发并且 div 消失。但它只是在第一个建议。如果我 select 第二个或第三个建议， div 保留并且一切正常，只要 selected 建议是 within/over 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");
}

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

jQuery mouseleave fires when first item from autocomplete is selected

javascript

jquery

autocomplete