Das Menü oben besteht aus einem Eltern-Eintrag (“Berner Oberland”) und zwei Kinder-Einträgen (“Flüsse” und “Berge”). Der Elterneintrag, welcher selber keine Funktion haben soll, wird mit einem Fake-Link erstellt (#-Zeichen als Linkziel):
Unschön ist nun, dass sich der Mauszeiger auch beim Fake-Link zu einem Hand-Symbol wandelt, obschon der Link nirgends hinführt:
Mit CSS-Klasse das Aussehen des Mauszeigers ändern
Das Aussehen des Mauszeigers lässt sich mit einer CSS-Klasse ändern. Damit einem Menübefehl überhaupt eine CSS-Klasse zugewiesen werden kann, musst du die Option “CSS Classes” bei den Menü-Optionen zuschalten:
Jetzt wechselst du im “Customizer” in die Abteilung “Custom CSS” (ganz unten). Da tippst du die folgende CSS-Klasse ein, wobei “nonclick” ein frei wählbarer Name ist:
.nonclick > a:hover {
cursor: default;
}
Nun geht es darum, diese neue CSS-Klasse dem Menübefehl mit dem Fake-Link zuzuweisen. Öffne dazu den gewünschten Menüeintrag und schreibe den Klassen-Namen bei “CSS Classes” rein (Klick aufs Bild für vergrösserte Ansicht):
Das ist auch schon alles. Jetzt ändert der Mauszeiger seine Form nicht mehr, wenn er über dem Menüeintrag mit dem Fake-Link steht:
10 Antworten
Ist das Zufall- bei mir geht dies, indem ich das URL Feld einfach ganz leer lasse…… Beispiel: https://gruppe-elki.ch.
Hallo Monika.
Clever, ohne Hash 🙂
Nach meinem Test braucht du aber die CSS-Klasse, damit der Cursor sich nicht in einen Textcursor ändert, oder?
Ja, das stimmt. Hat bisher noch niemand bemerkt ;-).
CSS Klassen sind elegant. Danke für die Anleitung, kann ja für vieles gebraucht werden, zB farbige Schrift für einzelne Einträge.
Danke dir für den Input mit dem Weglassen des Hash-Zeichens 🙂
Wow, habe lange nach einer eleganten Lösung gesucht – und da ist sie 🙂 Vielen Dank für den Tipp!
Noch eleganter: Wenn man nur diesen CSS-Code verwendet, brauchst du nicht einmal eine CSS-Klasse vergeben. CSS prüft, ob der Link mit einem #-Zeichen beginnt, falls ja, wird der Cursor nicht verändert und bleibt default. Das ^ ist wichtig, damit nur #-Zeichen am Anfang verwendet werden. Enthält ein Link das #-Zeichen als Anker am Ende, soll der Cursor ja verändert werden, dort wollen wir den Pointer.
a[href^=”#”] {
cursor: default;
}
Grüße,
Marc
Danke Marc, clever!
Sorry, einen Fehler muss ich korrigieren: Es muss ein $ sein, kein ^. Wir müssen das #-Zeichen am Ende suchen, nicht am Anfang, da der Ankertext ja auch mit dem #-Zeichen beginnt (#anker). So funktionierte es nun zufriedenstellend 🙂
a[href$=”#”] {
cursor: default;
}
Noch ein Hinweis: Vorsicht beim CSS Kopieren hier aus den Kommentaren. Die Anführungszeichen sind die falschen. Sie müssen durch die “Standard-Gänsefüßchen” ersetzt werden. Beim Schreiben werden sie hier umgewandelt.
@Haeme: Vielleicht gibt’s ja ein Kommentarplugin zum Einfügen und Kopieren von (CSS) Code …
Das mit dem Code-Freundlichen Kommentieren nehme ich gerne in den Backlog, danke für den Input!