Listenelemente zeigen zufällige Farbe in css

-1

Insgesamt noob hier versucht, eine Website für eine College-Aufgabe zu bauen. Ich habe es so, wie ich es will, außer für das Navigationsmenü. Ich wollte die Links so einstellen, dass sie eine bestimmte Farbe haben, dann ändere die Farbe für 'hover', ändere sie wieder für 'aktiv' und wieder für 'besucht'. Die Befehle 'hover' und 'active' funktionieren gut, aber wenn ich den Befehl 'visited' aktiviere, scheint es nur die Links zu färben, die es färben, und die Links zu kommentieren, machen die Links zu einer violetten Farbe, die ich nirgends spezifiziert habe. Ich habe keine Ahnung, wie das überhaupt möglich ist. HTML:Listenelemente zeigen zufällige Farbe in css

<html> 
    <head> 
    <meta charset="UTF-8"> 
    <title>home</title> 
    <style> 
    </style> 
    <link href="style/homeContent.css" rel="stylesheet" type="text/css"> 
    </head> 
    <ul class="nav"> 
     <li><a href="#home">Home</a></li> 
     <li><a href="#portfolio">Portfolio</a></li> 
     <li><a href="#contact">Contact</a></li> 
    </ul> 
    </body> 
</html>

CSS:

body 
{ 
    background-color: #1B1716; 
} 

.nav 
{ 
    font-family: source-sans-pro; 
    font-size: 20px; 
    padding-left: 200px; 
    margin: 0; 
    text-align: center; 
    width: 100%; 
    max-width: 1000px; 
} 
.nav li 
{ 
    display: inline; 
} 
.nav a 
{ 
    display: inline-block; 
    padding: 100px; 
    text-decoration: none; 
} 
.nav a:link 
{ 
    color: #E4E4E4; 
} 
.nav a:hover 
{ 
    color: #FFFFFF; 
    text-shadow: 0px 0px 15px #FFFFFF; 
} 
.nav a:visited 
{ 
    color: #CDCDCD; 
} 
.nav a:active 
{ 
    color: #C60003; 
}

Danke für die Hilfe!

Quelle

2016-12-04 Brian

kann ich nicht wirklich sehen Sie Problem, welche Art Sie wünschen für die ': visited' Version der Link? Auch der lila Text ist Browser-Standard – Isigiel

danke für die Beantwortung von Isigiel, ich wusste nicht, dass lila ein Browser-Standard ist. Ich nehme an, es ist auf der ganzen Linie, weil es mit Chrome, Safari und Firefox passiert. Wenn dies der Fall ist, bedeutet dies, dass mein .nav a: link {color: # E4E4E4;} vollständig ignoriert wird. Das: besucht sollte nur passieren, nachdem der Link angeklickt wurde. – Brian

Es scheint, dass Ihr Code vollständig korrekt ist, führen Sie das Snippet, das ich gemacht habe, wo ich die Farben geändert habe, so können Sie sehen, welche Linien angewendet werden, Links sind jetzt blau, dann weiß, wenn Sie den Mauszeiger halten, rot, wenn Sie klicken und grün nachdem geklickt wurde.

Das von Ihnen erwähnte Purpur ist ein Browser-Standard, der nur auf alle besuchten Links angewendet wird.

body 
 
{ 
 
    background-color: #1B1716; 
 
} 
 

 
.nav 
 
{ 
 
    font-family: source-sans-pro; 
 
    font-size: 20px; 
 
    padding-left: 200px; 
 
    margin: 0; 
 
    text-align: center; 
 
    width: 100%; 
 
    max-width: 1000px; 
 
} 
 
.nav li 
 
{ 
 
    display: inline; 
 
} 
 
.nav a 
 
{ 
 
    display: inline-block; 
 
    padding: 100px; 
 
    text-decoration: none; 
 
} 
 
.nav a:link 
 
{ 
 
    color: green; 
 
} 
 
.nav a:hover 
 
{ 
 
    color: #FFFFFF; 
 
    text-shadow: 0px 0px 15px #FFFFFF; 
 
} 
 
.nav a:visited 
 
{ 
 
    color: blue; 
 
} 
 
.nav a:active 
 
{ 
 
    color: #C60003; 
 
}

<html> 
 
    <head> 
 
    <meta charset="UTF-8"> 
 
    <title>home</title> 
 
    <style> 
 
    </style> 
 
    <link href="style/homeContent.css" rel="stylesheet" type="text/css"> 
 
    </head> 
 
    <ul class="nav"> 
 
     <li><a href="#home">Home</a></li> 
 
     <li><a href="#portfolio">Portfolio</a></li> 
 
     <li><a href="#contact">Contact</a></li> 
 
    </ul> 
 
    </body> 
 
</html>

Quelle

2016-12-04 13:31:58 Isigiel

Danke nochmal Isigiel, dein Code funktioniert phänomenal. Ich denke, ich habe herausgefunden, was passiert ist: Grundsätzlich, sobald Sie auf die Links klicken, übernimmt der a: besuchte Teil auf unbestimmte Zeit, auch wenn Sie die Seite aktualisieren. Aber wenn ich den Browser verlasse und das Ganze neu starte, wird die Linkfarbe wieder auf Standard zurückgesetzt ... bis Sie darauf klicken. Das passiert auch mit deinem Code. Ich kann jetzt damit arbeiten, es hat sowieso keine hohe Priorität. vielen Dank für deine Hilfe! – Brian

Besuchte Links basieren auf Ihrem Browserverlauf, sodass sie für alle Nutzer unterschiedlich angezeigt werden können. Einige Browser werden jedes Mal zurückgesetzt, wenn Sie sie schließen, und einige von ihnen behalten sie "besucht", bis Sie Ihren Verlauf löschen. – Tremors

Listenelemente zeigen zufällige Farbe in css

Antwort

Verwandte Themen