Wenn du uns einen Link zur Seite gegeben hättest, könnten wir uns das mal ansehen, aber so……
Vermutlich wird es die CSS-Klasse current_page_item sein
-
Diese Antwort wurde geändert vor 4 Jahren, 7 Monaten von
bscu.
-
Diese Antwort wurde geändert vor 4 Jahren, 7 Monaten von bscu.
Ohne Link zur Seite ist es schwierig, aber versuch mal folgenden CSS Code
#site-navigation .menu > li.menu-item-has-children > a:focus {
font-weight: bold;
}
PS. Die Angabe li.menu-item-has-children könnte falsch sein, ist bei der Demo des Theme so angegeben.
-
Diese Antwort wurde geändert vor 4 Jahren, 7 Monaten von
namenlos.
also a:focus zeigt irgendwie keinerlei Reaktion.
.menu li a{
color: #000;
line-height: 50px;
font-family: TAHOMA;
font-size: 16px;
display: block;
-o-transition: .25s;
-ms-transition: .25s;
-moz-transition: .25s;
-webkit-transition: .25s;
transition: .25s;
}
#site-navigation .menu li a:hover{
color:#000;
font-weight:bold;
opacity:1;
So sollte es funktionieren
#site-navigation .menu li a:focus{
font-weight:bold;
}
Hi namenlos,
leider nicht. Die Schrift wird wieder „dünn“ sobald ich mit der Maus von dem Link gehe 🙁
Gibt es noch einen alternativen Befehl für „Focus“ ?
statt focus denn evtl. visited
#site-navigation .menu li a:visited{
font-weight:bold;
}
visited steht für bereits besuchte Links. Aber nun weiß ich nicht ob der denn alle bereits besuchten makiert oder nur die gerade aktuelle.
Hier eine Übersicht aller Pseudo Klassen
:link Elemente die ein Hyperlink zu einem noch nicht besuchten Ziel sind
:visited Elemente die ein Hyperlink zu einem bereits besuchten Ziel sind
:active das Element aktiv ist (z.B. Maustaste auf einen Link gedrückt ist).
:hover die Maus über dem Element hovert
:focus der Fokus auf dem Element liegt
PS. Hab eben mal kurz eingelesen und glaube eher, das du hierfür eine neue CSS Klasse anlegen und die in die php Datei einfügen musst. Dafür fehlen mir aber die Kenntnisse
-
Diese Antwort wurde geändert vor 4 Jahren, 7 Monaten von namenlos.
Danke dir trotzdem! Leider funzt das auch nicht.
Ich schaue mal, ob ich das überhaupt gelöst bekomme 🙂
Hi Namenlos,
kannst du nochmal einen Blick drauf werfen? http://www.it-service-lange.de ich habe die Seite jetzt temp. freigegeben!
Hiermit hat es auf deiner Seite funktioniert
.menu li a:focus{
font-weight:bold;
}
Den Mouse Hover würde ich evtl. nochmal überdenken und vielleicht nur ein Farbwechsel oder so in Betracht ziehen. Bei dein Bold Hover zappelt das ganze Menü herum.
Ich danke dir!
Kann man das Zappeln abstellen oder sollte ich den Mouse Hover dort abschalten?
ok, Effekt ist entfernt aber nach dem Click bleibt der Menübutton trotzdem nicht fett?!?!
Das meine ich mit in der.php Datei einfügen, du hast zwar jetzt die neue CSS Klasse , aber die muss deine Seite auch aus der .php Datei ziehen. Anders wäre es wenn die Klasse schon geben würde und du diese nur überschreibst. Vielleicht kann dir @pixolin da ein Tip geben, wo und welche Zeile du dort einfügen musst.
Eigentlich wollte ich mich an diesem Thread gar nicht erst beteiligen, da ursprünglich keine URL zur Website angegeben war und meine telepathischen Fähigkeiten nicht sonderlich ausgeprägt sind.
Mittlerweile wurde die URL aber nachgeliefert und wenn ich es trotz des schwer nachvollziehbaren Titels „Navigation Hover-Effekt nach Click möglich?“ richtig verstanden habe, geht es darum, dass in der Navi Links nicht nur bei Mauszeigerkontakt sonder auch für die gerade aktivierte Webseite fett ausgegeben werden sollen?
Dazu reicht im Prinzip zu wissen, dass der Link zur gerade angezeigten Seite von WordPress automatisch mit der CSS-Klasse .current-menu-item versehen wird.
Die CSS-Regel ist dann sinngemäß
.current-menu-item a {
font-weight: bold;
color: pink;
}
Den (bewusst schrägen) Farbwert füge ich während des Debugging ein, damit sich rasch überprüfen lässt, ob die CSS-Regel bereits greift. So lässt sich herausfinden, dass es hier auf der Seite (danke für die URL!) spezifischere CSS-Regeln gibt, die unsere oben genannte Regel überschreiben (das ist eben das „Cascading“ am CSS). Setze ich deshalb noch die Klasse .menu davor, passt es – und zwar ohne ein !important:
.menu .current-menu-item a {
font-weight: bold;
color: pink;
}
Die hier mehrfach erwähnten Pseudoklassen :active und :focus haben andere Aufgaben: Während :hover den Zustand bei Mauszeigerkontakt beschreibt, bezeichnet :focus Elemente, welche mit einem Eingabegerät, wie z. B. der Tastatur, fokusiert wurden (https://developer.mozilla.org/de/docs/Web/CSS/:focus) und :active entspricht jedem Element, das vom Benutzer aktiviert wurde. Beim Mauszeiger ist das die Zeitspanne, wo die Taste gedrückt gehalten wird (https://developer.mozilla.org/de/docs/Web/CSS/:active).
Hab vielen lieben Dank!!! Es funktioniert! Danke, dass es euch gibt 🙂
