Anchor Elementfarbe ändert sich nicht, wenn

Question

schwebte

ich habe folgendes CSS:

.container a { 
    text-decoration: none; 
    font-weight: bold; 
    color: rgb(23, 230, 230); 
} 

.container a:hover { 
    text-decoration: underline; 
    color: white; 
} 

.container a:visited { 
    color: rgb(230, 0, 230); 
} 

Und diesen HTML (Stück):

<div class="container"> 
    ... 
    <div class="menu"> 
     <ul> 
      <li> 
       <a href="#">link1</a> 
      </li> 
      <li> 
       <a href="#">link2</a> 
      </li> 
      <li> 
       <a href="#">link3</a> 
      </li> 
     </ul> 
    </div> 
</div> 

Ich verstehe nicht, warum die alle Verbindungsoptionen funktionieren, bis auf die Farbe bei Hover: Es wird unterstrichen, aber die Farbe ändert sich nicht. Weiß jemand warum?

Answer 1

jsfiddle link for everyone

.container a { 
text-decoration: none; 
font-weight: bold; 
/* color: rgb(0, 230, 230); */ 
} 

.container a:hover { 
    text-decoration: underline; 
    color: green; 
} 

/* .container a:visited { 
    color: rgb(2, 0, 230);/ 
} */ 


.test { 
    /* color: black; */ 
} 

geladen ich Ihre HTML und CSS in meine erhabenen und es funktioniert ganz gut. Ich habe mit den Farben herumgespielt und alles ist super. Ich habe es in Geige geladen, um es dir zu zeigen. Wenn Sie eine Liste wie Sie haben, möchten Sie die Liste mit einer Art von Klasse oder ID gezielt ansprechen. Ich habe einige Dinge in der Geige kommentiert, damit du es sehen kannst. enter code here

Answer 2

Wenn mit Pseudo-Klassen auf Ankerelemente handelt, der Auftrag zählt.

Sie müssen in dieser Reihenfolge sein:

a:link 
a:visited 
a:hover 
a:active 

a:hover nach a:link und a:visited in der CSS-Definition, um wirksam kommen muss zu sein! a:active MUSS nach a:hover in der CSS-Definition kommen, um effektiv zu sein!

_{Quelle: http://www.w3schools.com/css/css_pseudo_classes.asp}

Es gibt eine beliebte mnemonic Sie sich daran zu erinnern können: LOVE HATE (lv ha).

Weitere Einzelheiten finden Sie in diesen Referenzen:

• Why do anchor pseudo-classes a:link, :visited, :hover, :active need to be in correct order?
• Why does .foo a:link, .foo a:visited {} selector override a:hover, a:active {} selector in CSS?
• How To Remember The Order of Selectors: LOVE and HATE

Answer 3

Wenn Sie Ihre CSS sind nicht zu finden ist nicht mit Wirkung nehmen, egal was Sie Es lohnt sich, !important Parameter hinzuzufügen, um dem Browser mitzuteilen, dass Sie Ihr Stilattribut als vorrangig behandeln.

.container a { 
    text-decoration:none !important; 
    font-weight: bold !important; 
    } 
    .container a:visited { 
    color: rgb(230, 0, 230) !important; 
    }  
    .container a:hover { 
    text-decoration:underline !important; 
    color: white !important; 
    } 

Having said that, manchmal sogar mit !important, noch kann Ihr Stil außer Kraft gesetzt werden. Um die CSS-Einstellungen im Browser zu entschlüsseln, muss unbedingt die Inspektorkonsole verwendet werden. Ich denke, dass Sie den Inspektor möglicherweise schon benutzen, aber wenn Sie mehr Info darüber wollen, lassen Sie mich bitte wissen.