Christian Huml: Hover wird überschrieben

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?

akzeptierte Antworten

  1. 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

    1. Hallo Jo,

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

      Mit freundlichen Grüßen

      Christian

      1. 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

      2. Hallo Christian,

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

        Rolf

        --
        sumpsi - posui - clusi
        1. 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

          --
          Rosen sind rot.
  2. @@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 🖖

    --
    “When UX doesn’t consider all users, shouldn’t it be known as ‘Some User Experience’ or... SUX? #a11y” —Billy Gregory
    1. Funktioniert auch 😀

      1. Funktioniert auch 😀

        Vieles funktioniert ;)

        Gruß
        Jo

        1. @@j4nk3y

          Funktioniert auch 😀

          Vieles funktioniert ;)

          Lösungen funktionieren; Hacks scheinen nur zu funktionieren.

          LLAP 🖖

          --
          “When UX doesn’t consider all users, shouldn’t it be known as ‘Some User Experience’ or... SUX? #a11y” —Billy Gregory
  3. 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

    --
    Rosen sind rot.