jQuery - auf Hover verlassen halten div sichtbar

Question

Sorry für die Frage Titel, ich wusste wirklich nicht, wie man es zusammenfassen eine kurze Beschreibung.

Im Wesentlichen habe ich eine <ul>, die meine Navigationslinks hat. Jedoch in einem der <li> Links ist meine benutzerdefinierte Dropdown-Warenkorb, um dem Benutzer eine Vorschau ihrer Artikel zu geben.

Jetzt, wenn ich über das Element schweben, möchte ich, dass es den Warenkorb von display:none zu display:block ändert, damit es sichtbar wird. Aber mit meinem Code, sobald ich das Element hovered auf ein Element klicken. Das Dropdown-Menü verschwindet, weil ich nicht länger über dem Element schwebe, das ich in meiner jQuery-Hover-Funktion definiert habe.

Zum Beispiel (quick Blindkode)

$('.hover-on-me').hover(function(){ 
    $('.hover-open').show(); 
},function(){ 
//This right here hides the dropdown 
    $('.hover-open').hide(); 
}); 

Jetzt bin ich nicht die Wetten auf Javascript/jQuery. Ich habe versucht, in der Funktion zu sagen, wenn sich die Maus noch in der Navigationsleiste befindet, verstecke sie nicht oder wenn die Maus sich im Warenkorb befindet, verstecke sie nicht. Ich dachte, das würde mich vom Hover-Element, vorbei an der Navigationsleiste und auf das Dropdown-Menü bewegen, aber es funktioniert nicht. als das Element bleibt dann offen und schließt nicht, wenn ich den Bereich verlasse.

Here is a simple jsfiddle mein Problem demonstrieren.

Danke!

Answer 1

Ich denke, es ist nur ein Fehler in Ihrem Klassennamen.

jQuery-Code: -

$('.hover-on-me').hover(function(){ 
     $(this).parent("li").addClass("active"); 
}, function(){ 
    $(this).parent("li").removeClass("active"); 
}); 

dieser Code Sie hinzufügen CSS: -

ul li.active{display:inline-block;} 
ul li.active .hover-open, ul li .hover-open:hover{display:block;} 

Können Sie bitte diese versuchen.

Answer 2

die Hover-Syntax wie folgt aussehen .. $ (Selektor) .hover (inFunction, outFunction) und versuchen Sie Ihr Skript wie folgt zu ändern ..

$('.hover-on-me').hover(
function(){ 
$('.hover-open').show(); 
}, 
function(){ 
if(!$('ul').is(":hover") || !$('.hover-open').is(":hover")){ 
    $('.hover-open').hide(); 
} 
} 
); 

OR Funktion verwenden Maus Ereignis ..

$(".hover-on-me") 
    .mouseenter(function() { 
    $('.hover-open').show(); 
}); 

$(".hover-open") 
.mouseleave(function() { 
$('.hover-open').hide(); 
}); 

für weitere Details siehe hier .. https://api.jquery.com/hover/#hover2 und https://api.jquery.com/category/events/mouse-events/