Hover wird überschrieben

[Christian Huml]

Guten Tag zusammen,

ich verwende zweimal hover auf article und einer Klasse siehe CSS:

article a 
{
	line-height:4em;
	color:#0099CC;
	text-decoration:none;
	
}

article a:focus, a:hover, a:active
{
	color:black;
}

.copyright a
{
	color:black;
	line-height:4em;
	
}

.copyright a:focus, a:hover, a:active
{
	color:#0099CC;
}

Jedoch nimmt article die Farbe von .copyright bei Hover. Wo liegt mein Problem?

[j4nk3y]

Hey,

article > a 
{
	line-height:4em;
	color:#0099CC;
	text-decoration:none;
	
}

article > a:focus, article > a:hover, article > a:active
{
	color:black;
}

.copyright > a
{
	color:black;
	line-height:4em;
	
}

.copyright > a:focus, .copyright > a:hover, .copyright > a:active
{
	color:#0099CC;
}

Eine eindeutige Kind Zuweisung sollte das einfach lösen (ungetestet).

Gruß
Jo

[Christian Huml]

Hallo Jo,

hat funktioniert 😀 Gibt es hierfür vielleicht einen Artikel?

Mit freundlichen Grüßen

Christian

[j4nk3y]

Hey,

hat funktioniert 😀 Gibt es hierfür vielleicht einen Artikel?

Kombinatoren

article a /* weist allen Links die in Artikeln enthalten sind {xxx} zu  */
{
	line-height:4em;
	color:#0099CC;
	text-decoration:none;
	
}

article a:focus, /* weist allen Links mit focus die in Artikeln enthalten sind {xxx} zu  */
a:hover, /* weist allen a Elementen die gehovert werden {xxx} zu*/
a:active /* weist allen a Elementen die aktiv sind {xxx} zu*/
{
	color:black;
}

.copyright a /* weist allen Links die in .copyright enthalten sind {xxx} zu  */
{
	color:black;
	line-height:4em;
	
}

.copyright a:focus, /* weist allen Links mit focus die in .copyright enthalten sind {xxx} zu  {xxx} zu  */
a:hover, /* weist allen a Elementen die gehovert werden {xxx} zu*/
a:active /* weist allen a Elementen die aktiv sind {xxx} zu*/
{
	color:#0099CC;
}

Gruß
Jo

[Rolf B]

Hallo Christian,

Der Kombinator behebt das Symptom. Warum er das tut, erklärt sich aus der Spezifität von Selektoren.

Rolf

[Matthias Apsel]

Hallo Rolf B,

Der Kombinator behebt das Symptom. Warum er das tut, erklärt sich aus der Spezifität von Selektoren.

Kombinatoren haben keinen Einfluss auf die Spezifität.

Bis demnächst
Matthias

[Gunnar Bittersmann]

@@Christian Huml

Jedoch nimmt article die Farbe von .copyright bei Hover.

Wo liegt mein Problem?

Was du schreibst: article a:focus, a:hover, a:active
Was du meinst: article a:focus, article a:hover, article a:active

Was du schreibst: .copyright a:focus, a:hover, a:active
Was du meinst: .copyright a:focus, .copyright a:hover, .copyright a:active

LLAP 🖖

[Christian Huml]

Funktioniert auch 😀

[j4nk3y]

Funktioniert auch 😀

Vieles funktioniert ;)

Gruß
Jo

[Gunnar Bittersmann]

@@j4nk3y

Funktioniert auch 😀

Vieles funktioniert ;)

Lösungen funktionieren; Hacks scheinen nur zu funktionieren.

LLAP 🖖

[Matthias Apsel]

Hallo Christian Huml,

Wenn man dein CSS

article a 
{
	line-height:4em;
	color:#0099CC;
	text-decoration:none;
	
}

article a:focus, a:hover, a:active
{
	color:black;
}

.copyright a
{
	color:black;
	line-height:4em;
	
}

.copyright a:focus, a:hover, a:active
{
	color:#0099CC;
}

auf das Relevante kürzt (Gunnar hat dich schon auf deinen Denkfehler hingewiesen), kommt das raus:

a:hover  /* Bestandteil von Regel 2 */
{
	color:black;
}
a:hover  /* Bestandteil von Regel 4 */
{
	color:#0099CC;
}

Jedoch nimmt article die Farbe von .copyright bei Hover.

Die spätere Anweisung überschreibt die frühere.

Bis demnächst
Matthias