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/

you are using the id "item" several times. ids must be unique! also, depending on what jquery version you have, :hover is buggy. just google, first hit: http://stackoverflow.com/questions/11998514/jquery-1-8-unsupported-pseudo-hover — Alex, Jan 09 '14 at 18:20
If all you want to do is hide `.list` when the user is not hovering on `.list` or `.item`, take out that whole `setTimeout` portion and just leave the `$('.list').hide();` - your mouseleave is already triggered by each. — Goose, Jan 09 '14 at 18:23
Goose:Your answer is Correct , but this makes a little problem, when I paste from the button to list the list hide fast so i need to paste very fast to catch the list from hiding... any idea ?! — Samy Reef, Jan 09 '14 at 18:29
Is this intended to be a dropdown? or would the list be displayed somewhere else on the page? Whenever you mouseout of your specified elements, the mouseleave function will trigger - so you'll most likely need to put these elements inside of a parent element and trigger the mouse events on the parent element. — Goose, Jan 09 '14 at 18:31
it's a list to store the items in a specifics stores. so when you display a list of items and you hovering some item this list should appear to select a store for the hovering item. — Samy Reef, Jan 09 '14 at 18:37
if this a dropdown kind of menu or something similar, it would make sense to put the list as a child of item. Since you are not using any animations, using css alone could solve your problem — Huangism, Jan 09 '14 at 18:48
I use "costume scrollbar" script so I had to make the container of "items list" overflow:hidden: — Samy Reef, Jan 09 '14 at 19:36

Goose · Accepted Answer · 2014-01-09T20:21:14.447

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.

thanks Goose, why Im not using the list as a children, that because the div parent of "items list" has an overflow: hidden; so the list of store can't be shown correctly when you try to select a store for the last item in list. and here when I get the "store list" out, and by this method the list display correctly out of the "items list" box — Samy Reef, Jan 09 '14 at 18:51
can you create a jsfiddle that has **all** of your markup and styling? I think this would help me better understand. — Goose, Jan 09 '14 at 18:53

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

1 Answers1