3

There is already a similiar question here, but the solution didn't helped me out. to the question

i have a li, inside it is a div. Inside that div is a loginform.

If i hover over the li the div appears via jQuery.

Now - if i select the first suggestion from the browser-autocomplete, mouseleave is fired an the div disapears. But its only at the first suggestion. If i select the second or thrid suggestion from it, the div stays and all is alright, as long as the selected suggestion is within/over the div (obvious).

jQuery: 1.10.2 tested in 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/

Community
  • 1
  • 1
FabZen
  • 33
  • 3

1 Answers1

7

Add a condition if your input is focus:

if(!$('input').is(':focus')) {
    $(this).removeClass("hover");
}
Pik_at
  • 1,459
  • 9
  • 14
  • Thanks - i've tried it and unfortunately it dosen't changed anything. Div still disapears after first selection. – FabZen Feb 19 '15 at 13:06
  • I just fork your code to try the solution: http://jsfiddle.net/Pik_at/adzrn7tt/1/ – Pik_at Feb 19 '15 at 13:22