Wie bewege ich den Mauszeiger über das Untermenü?

Question

ich versuche, die Schaltfläche im Hover-Status zu machen, während der Cursor immer noch im Untermenü, aber nicht herausfinden kann. Brauche wirklich Hilfe! Vielen Dank!

function hideAllCat() { 
    $("#categories").hide(); 
} 

hideAllCat(); 

$("#tab50").mouseover(function(){    
    hideAllCat(); 
    $("#categories").slideDown(); 
}); 

$("#categories").mouseleave(function() { 
    hideAllCat(); 
}); 

http://jsfiddle.net/G5RtR/24/

Answer 1

Ihr #tab50 Element sind nicht die Eltern zu #categories Element, daher können Sie nicht :hover die pseudo-Klasse verwenden. :hover funktioniert nur, wenn das Objekt direkt unter der Maus Pfeil ist. Davon abgesehen haben Sie jetzt 2 (++) mögliche Lösungen.

1. Machen Sie #tab50 Eltern zu #categories. Wenn das Untermenü erweitert wird, wird auch die # tab50 entsprechend erweitert.
2. Verwenden Sie Javascript, um den Job zu erledigen. $("#categories").mouseover(function({$("#tab50").css({'background':'#abc','color':'red'})}); Und denken Sie daran, die Farben von #tab50 wieder normal $("#categories").mouseleave(); in sich ändern

Hinweis:

• #categories sollte ein class anstelle eines id, da hideAllCat() alle categories verstecken sollte, und ein kann nicht mehr als 1 id in einer HTML-Datei haben.