CSS Navigationsleiste hover

[selberbauer]

Hallo,

Ich habe eine Navigationsleiste mit folgendem Aufbau:

<nav>
 <ul>
  <li><a>Home</a></li>
  <li><a>Kontakt</a></li>
</nav>

Nun möchte ich, dass beim hovern der li's sich die Hintergrundfarbe und die Schrift von dem Wert in <a> ändert:

nav ul li:hover
{
    color: #3E484C;
    background: #FFFFFF;
}

Nur das ändert natürlich nicht die Farbe der Links (<a>).

Gibt es nun eine Möglichkeit über das hovern von <li>'s die Farbe der <a>'s zu ändern oder muss das alles über <a>'s machen?

Gruß

 

[AlexLi]

wenn ich das richtig verstanden habe:

nav ul li a:hover {
    color: #xxxxxx;
}

wenn nicht, dann korrigiert mich.

 

[Yuuri]

nav ul li:hover {
  background: #FFFFFF;
}

nav ul li:hover a {
  color: #3E484C;
}

 

[Kausalat]

Es fehlt noch ein schließendes </ul> in deinem Codeschniipsel. Der Code von AlexLi ist korrekt. Der Zustand, hier :hover, bezieht sich immer auf das Element unmittelbar vor dem Doppelpunkt.

@ Yuuri:
Wenn die Navigationslinks als Blockelement (display: block) formatiert sind — aus Gründen der einfacheren Bedienbarkeit zu empfehlen — entfällt die erste Formatierung.

 

[selberbauer]

Danke an Yurri,

hat geklappt.
Wieder was gelernt

 

[Yuuri]

Wenn die Navigationslinks als Blockelement (display: block) formatiert sind — aus Gründen der einfacheren Bedienbarkeit zu empfehlen — entfällt die erste Formatierung.

Das mag sein, aber nur durch li:hover kannst du das a nicht (vom Text her) färben, da ein einzelnes a (irgendwo anders im Stylesheet) diese Farbe überschreibt und es hierbei nicht vererbt wird.

 

[selberbauer]

Ich denke ich muss doch wieder auf <a> als hover-träger umschalten, da durch das padding der li's man den link sonst nicht erwischt...

 

[Kausalat]

@ Yuuri:
Wo soll das Problem sein? Wenn "nav ul li a" als Block dargestellt wird, wird dies doch nicht durch andere Links im kompletten Dokument übernommen.

Daher mein Vorschlag:

nav ul li a {
display: block;
width: ???px;
background: #xxxxxx;
color: #xxxxxx;
padding: ...;
}

nav  ul li a:hover {
background: #xxxxxx;
color: #xxxxxx;
}

 

[Yuuri]

Wenn a als Block definiert ist. Padding? Margin? Border? Die Hintergrundfarbe des li-Elements wird beim Hover somit immer gestyled (schreckliches Wort), die Textfarbe würde aber nicht übernommen werden, da mit Sicherheit irgendwo im Stylesheet ein a { color: #...; } vorkommt, wodurch es ohne extra li:hover a { color: #...; } nicht vererbt werden würde, da a direkt gestyled wird und li:hover { color: #...; } verworfen.

Dein Weg wäre wunderbar, wenn man die Liste weg lässt und das a direkt styled, aber mit Liste gibt es keine Notwendigkeit das a als Block zu definieren.

 

[selberbauer]

Ich habe die li's als inline-block definiert.

oder habe ich was überlesen?

 

[Kausalat]

@ Yuuri:

Ich glaube, wir reden aneinander vorbei. In CSS hat immer die Variable Vorrang, die näher bezeichnet ist. In diesem Fall immer "nav ul li a". Von den Eigenschaften eines normalen "a" wäre der Navigationslink nur betroffen, wenn ein !Important-Zusatz oder eine bisher ungenannte Eigenschaft dabeistünde. Ich habe ein Menü schon mehrfach auf "meine" Weise ohne jegliche Probleme gestaltet.

Meine Idee dahinter ist, nicht den Hover-Zustand der <li>s, sondern lediglich der <a>s zu gestalten. Damit spart man sich unnötige Codezeilen und Probleme.

 

[Yuuri]

Nein das passt so. Was Kausalat meint ist:

<style type="text/css">
/* vertikal */
nav a {
	display: block;
	width: 128px;
	height: 32px;
	
	color: #000;
	background: #fff;
}

nav a:hover {
	color: #fff;
	background: #000;
}

/* horizontal */
nav a {
	float: left;
	display: inline-block;
	width: 128px;
	height: 32px;
}
</style>

<nav>
	<a href="#">Seite 1</a>
	<a href="#">Seite 2</a>
	<a href="#">Seite 3</a>
	<a href="#">Seite n</a>
</nav>

Was du momentan hast ist:

<style type="text/css">
/* vertikal */
nav ul li {
	width: 128px;
	height: 32px;
	
	background: #fff;
}
nav ul li:hover { background: #000; }

nav ul li a { color: #000; }
nav ul li a:hover { color: #fff; }

/* horizontal */
nav ul li { float: left; }
</style>

<nav>
	<ul>
		<li><a href="#">Seite 1</a></li>
		<li><a href="#">Seite 2</a></li>
		<li><a href="#">Seite 3</a></li>
		<li><a href="#">Seite n</a></li>
	</ul>
</nav>

 

[selberbauer]

Genau,

ich persönlich finde das zweite besser.
Technisch spricht allerdings auch nichts gegens erstere

 

[Kausalat]

Nein, Kausalat will keine Navigation ohne Liste erstellen ...

Der HTML-Quellcode wäre bei beiden Lösungen gleich.

 

[Yuuri]

Nein, somit würdest du dir die Liste sparen, die evtl. mehr Probleme mit sich bringt (margin + padding, außer bei einem CSS Reset).

 

[Kausalat]

Aus Sicht der Semantik wären wild hingeklatschte Links keine sonderlich gute Idee.

Ohne CSS sähe der Benutzer nur: StartseiteArtikelDownloadsÜber unsKontakt

 

[Daaron]

Jep. Eine Lösung ohne Liste löst unter Umständen Probleme sowohl bei der Barrierefreiheit als auch bei Crawlern aus.
Strukturell ist es deutlich besser, Navigationen in Listen zu packen. Hübsche Klickbarkeit erreicht man problemlos, indem man die Links zu Blockelementen macht.