How to make mouseleave function stop when the mouse is hover a specific div

Question

This is the HTML code :

<div class="item">item 01</div>
<div class="item">item 02</div>
<div class="item">item 03</div>
....

<div class="list">
   <ul>
       <li>store 1</li>
       <li>store 2</li>
       <li>store 3</li>
   </ul>
</div>

Now how it works :

when I Hover to "item 0X" the "List" should diplaying next to button "item 0X" and this Works fine.

the problem is how to make the list stay visible when I come back from the list to the button again.

I try to use this code but it doesn't works

$(document).on({
        mouseenter: function () {
            var div = $(this);
            if( $('.list').css('display') == "none" )
            {
                actionHover(div);
            }
        },
        mouseleave: function () {
            setTimeout( function(){
                if( $(".list").is(':hover') )
                { 

                }
            else if( $(".item").is(':hover') )
            { 

            }
                else
                { 
                    $('.list').hide();
                }
            }, 100)
        }
    },".list, .item");

And when the mouse get out from list it makes an error:

Error: Syntax error, unrecognized expression: unsupported pseudo: hover

http://jsfiddle.net/y2KcC/3/

Answer 1

If I'm understanding correctly what you'd like to do, try something like this:

$(document).on({
    mouseenter: function () {
        $(this).children('.list').show();
    },
    mouseleave: function () {
        $(this).children('.list').hide();
    }
}, ".item");

This would require that you have the list as a child element of .item, and that mousing over/out the parent .item would be what shows/hides each list.

Here is a sample, with the markup also adjusted.

Edit

Ok, I cleaned up your code and removed the setTimeout function. After that it looks the issue you're having is not that the list disappears but that it is trying to move again once you mouseover it. I adjusted it so that it only changed position if you were mousing over the .item element. As shown below:

if ($(this).hasClass('item')) {
    $('.storeList').css({'left': (left + btn_wtd) , 'top': top });
}

Here is an updated fiddle.