Question

I am creating a CSS hover drop-down menu. I have a search icon that has a hover on it also. When you hover over the icon it drops down an input for a search. However when the mouse moves off the area the search box disappears. Looking to keep the box there as long as the cursor is inside the input field, or the input is focused.

If you need me to post what I have just let me know, but it’s basically just this with a standard pure CSS hover drop-down, this is the basic HTML setup:

<li class="search">
    <ul class="search">
        <li><input placeholder="enter search" action=""></li>

So it works but as I stated when you move off, even with the cursor flashing it will hide again. I’m assuming I’ll need some sort of JavaScript to make this work, but not sure where to start with that.

Answer 1

You could just add and remove a class to the li using JavaScript. The code below is in jQuery though.

        $( ".search" ).onmouseenter( function() {
            $( "input" ).addClass( "seeMe" ).focus();
        });

        $( "input" ).blur( function() {
            $( this ).removeClass( "seeMe" );
        });

This makes the input visible and gives it focus when you hover the search li and hides when the input loses focus.

See a modified version of this on my jsFiddle.