So stoppen Sie die Mouseleave-Funktion, wenn die Maus über ein bestimmtes Div bewegt wird

Question

Dies ist der 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>

Nun, wie es funktioniert:

Wenn ich mit der Maus über „Element 0X“ fahre, sollte die „Liste“ neben der Schaltfläche „Element 0X“ angezeigt werden, und das funktioniert einwandfrei.

Das Problem besteht darin, wie ich dafür sorgen kann, dass die Liste sichtbar bleibt, wenn ich von der Liste zurück zur Schaltfläche komme.

Ich versuche, diesen Code zu verwenden, aber er funktioniert nicht

$(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");

Und wenn die Maus die Liste verlässt, macht sie einen Fehler:

Fehler:Syntaxfehler, unbekannter Ausdruck:nicht unterstütztes Pseudo:schweben

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

Answer 1

Wenn ich richtig verstehe, was Sie tun möchten, versuchen Sie etwas wie Folgendes:

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

Dies würde erfordern, dass Sie die Liste als untergeordnetes Element von haben .item, und das Bewegen der Maus über/aus dem übergeordneten Element .item wäre das, was jede Liste ein-/ausblendet.

Hier ist ein Beispiel, wobei auch das Markup angepasst wurde.

Bearbeiten

Ok, ich habe deinen Code bereinigt und entfernt setTimeout Funktion.Danach scheint das Problem, das Sie haben, nicht darin zu bestehen, dass die Liste verschwindet, sondern dass sie versucht, sich erneut zu verschieben, sobald Sie mit der Maus darüber fahren.Ich habe es so angepasst, dass es seine Position nur ändert, wenn man mit der Maus darüber fährt .item Element.Wie nachfolgend dargestellt:

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

Hier ist ein aktualisierte Geige.