Auf meiner Website habe ich ein Menü mit bestimmten Funktionen und Animationen:
Jetzt funktionieren diese Funktionen gut, aber das Problem ist, dass sie alle aktiviert werden können, indem Sie im Menü und darüber und nicht nur auf den Elementen klicken. Kann es behoben werden, so dass alle Funktionen (ohne sie zu ändern) durch Klicken auf ein Element im Menü aktiviert werden?
JSFIDDLE: Ссылка
HTML des Menüs:
%Vor%Ich habe auch ein Update für deine Fiddle gemacht:
Meine Lösung bestand darin, den click-event-handler für die <LI> -Elemente zu entfernen und durch click- und Hover-Events für die Schaltflächen zu ersetzen:
Es sind nur zwei minimale Änderungen an Ihrem CSS erforderlich.
Der Vorteil dieser Lösung (anstatt sich auf .headlines: hover-selector zu verlassen) besteht darin, dass Ihre Schaltflächen unterschiedliche Größen und Abstände zwischen ihnen haben können. Der Bereich, der zum Auslösen der Hover-Stile verwendet wird, ist immer der Button-Bereich und nicht die Größe des umgebenden <li>
Dies fügt hinzu und entfernt .hover Klassen in .headlines und Ihre Schaltflächen übergeordnete <li> Elemente.
In Ihrem CSS müssen Sie nur im Auswahlqualifikator von :hover pseudo-selector auf .hover class wechseln.
Also wechseln Sie von:
%Vor%bis
%Vor%Voila.
Sieh dir diese Geige an, es sieht so aus, als wäre das Problem in deinem CSS:
%Vor%Wegen dieser Regel wurden Ihre li-Elemente nach unten verschoben, aber in css ausgelöst, ausgelöst durch .headlines (ul-Element), deren Position 180px höher bleibt, als ihre untergeordneten Elemente, so dass Sie die Opazität ändern, wenn die Maus höher als Ihr Menü ist Artikel. Und Ihre ul Element Breite war 100%, ihre Kinder li Elemente Breite war die gleiche (ohne Margen), so ändert sich Ihre Opazität auch, wenn die Maus von links oder rechts von Ihrem eigentlichen Text des Menüs war.
Hier ist die ordinierte Geige:
%Vor%Dies liegt daran, dass Sie das li-Element für alle Ereignisse (click und hover) in script und css anvisieren. Ändern Sie stattdessen Ihre CSS-Ziel-Schaltfläche. Ändern Sie die Deckkraft für die Schaltfläche. Geben Sie das: Hover-Styling für Schaltflächen und nicht für li. Außerdem benötigen Sie keinen Zeiger, sondern die Tasten.
Tags und Links javascript html jquery css