a:hover funktioniert nicht?!

[seVes]

Servus Leute!

Ich hab gerade ein paar Verständnisprobleme mit CSS und weiß nimmer so richtig weiter.

Zum folgenden CSS-Abschnitt gibt es das Problem, dass auf der Seite im Footer das Feld "Impressum" zwar im Hintergrund #C71E23 dargestellt wird, jedoch die Schriftfarbe nicht #FFFFFF sondern #666666 ist.

Warum? Was mach ich falsch?

Und vor allem, wenn ich auf den Link klicke, dann wird anschließend auch im Hover-Effekt die Schriftfarbe in #FFFFFF dargstellt.

Hoffe Ihr habt Tipps.

  
body {  
	background: url(../media/fill.jpg) repeat-x left top;  
	color: #666666;  
	font: 14px Verdana;  
	margin: 0px auto;  
}  
#wrapper {  
	margin: 0px auto;  
	width: 780px;  
}  
#header {  
	background: url(../media/banner.png) no-repeat center top;  
	height: 380px;  
}  
#content {  
	margin: 20px auto;  
}  
#footer {  
	background: #000000;  
	clear: both;  
	color: #FFFFFF;  
	margin: 0px auto;  
	padding: 15px 0px;  
	text-align: center;  
}  
#footer a {  
	margin-left: 30px;  
	padding: 5px 10px;  
	text-decoration: none;  
}  
#footer a:link, a:visited {  
	color: #666666;  
}  
#footer a:focus, a:hover, a:active {  
	background: #C71E23;  
	color: #FFFFFF;  
}  

[ChrisB]

Hi,

Ich hab gerade ein paar Verständnisprobleme mit CSS

In diesem Fall wohl mit Selektoren.

Zum folgenden CSS-Abschnitt gibt es das Problem, dass auf der Seite im Footer das Feld "Impressum" zwar im Hintergrund #C71E23 dargestellt wird, jedoch die Schriftfarbe nicht #FFFFFF sondern #666666 ist.

Warum? Was mach ich falsch?

Du hast nicht angegeben, dass du Links in #footer beim hovern speziell formatieren willst.

#footer a:focus, a:hover, a:active {
background: #C71E23;
color: #FFFFFF;

Hier hast du einen Selektor verwendet, der Links im Zustand :focus betrifft, die sich in #footer befinden.
Und danach hast du zwei Selektoren angegeben, die Links in den Zuständen :hover und :active betreffen - aber *unabhängig* davon, wo im Dokument sie sich befinden.

MfG ChrisB

[MudGuard]

Hi,

#footer a:focus, a:hover, a:active {
background: #C71E23;
color: #FFFFFF;

Hier hast du einen Selektor verwendet, der Links im Zustand :focus betrifft, die sich in #footer befinden.
Und danach hast du zwei Selektoren angegeben, die Links in den Zuständen :hover und :active betreffen - aber *unabhängig* davon, wo im Dokument sie sich befinden.

Ergänzung: weil außerdem #footer a:link formatiert wird, wirken diese Angaben, da #footer a:link höhere Specificity hat als a:hover ...

cu,
Andreas

[seVes]

#footer a:focus, a:hover, a:active {
background: #C71E23;
color: #FFFFFF;
}

Ich dachte das sagt aus, dass ich im <div>-footer für alle Links die werte focus, hover, active mit den gleichen CSS-Attributen versehe.

Wie hat dies nun richtig zu lauten?

Dachte ein Komma bewirkt, das für die komma-getrennten Werte die gleichen CSS-Attribute zutreffen.

So hatte ich es im SelfHTML-Doku jedenfalls verstanden.

[MudGuard]

Hi,

#footer a:focus, a:hover, a:active {
background: #C71E23;
color: #FFFFFF;
}

Ich dachte das sagt aus, dass ich im <div>-footer für alle Links die werte focus, hover, active mit den gleichen CSS-Attributen versehe.

Wie hat dies nun richtig zu lauten?

Dachte ein Komma bewirkt, das für die komma-getrennten Werte die gleichen CSS-Attribute zutreffen.

So ist es ja auch:

für
#footer a:focus
                    setzt Du dieselben Regeln wie für
a:hover
                    und für
a:active

Du willst aber wohl dieselben Werte für
#footer a:focus
                    wie für
#footer a:hover
                    und für
#footer a:active
                    setzen.

cu,
Andreas

[seVes]

Hi,

#footer a:focus, a:hover, a:active {
background: #C71E23;
color: #FFFFFF;
}

Ich dachte das sagt aus, dass ich im <div>-footer für alle Links die werte focus, hover, active mit den gleichen CSS-Attributen versehe.

Wie hat dies nun richtig zu lauten?

Dachte ein Komma bewirkt, das für die komma-getrennten Werte die gleichen CSS-Attribute zutreffen.

So ist es ja auch:

für
#footer a:focus
                    setzt Du dieselben Regeln wie für
a:hover
                    und für
a:active

Du willst aber wohl dieselben Werte für
#footer a:focus
                    wie für
#footer a:hover
                    und für
#footer a:active
                    setzen.

cu,
Andreas

Sorry, aber irgendwie versteh ich es nicht.

Ist das nicht dasselbe beides?

Also ich versteh irgendwie noch nicht den Fehler.

Muss ich also für jede Pseudoklasse seperat

  
#footer a:link  {}  
#footer a:visited {}  
/*...*/  

machen!?

[Beat]

Sorry, aber irgendwie versteh ich es nicht.
Ist das nicht dasselbe beides?
Also ich versteh irgendwie noch nicht den Fehler.

Muss ich also für jede Pseudoklasse seperat

#footer a:link  {}
#footer a:visited {}
/.../

>   
> machen!?  
  
Nein, du musst verstehen, dass das Komma ein Listenseperator für Selektoren darstellt  
selector1, selector2, selector3  
  {}  
  
mfg Beat

-- 

><o(((°>           ><o(((°>  

   <°)))o><                     ><o(((°>o  
Der Valigator leibt diese Fische

[seVes]

Nein, du musst verstehen, dass das Komma ein Listenseperator für Selektoren darstellt
selector1, selector2, selector3
  {}

Okay das leuchtet mir jetzt ein, auch die anderen Posts.

Allerdings weiß ich immernoch nicht, wie ich definiere, dass in #footer die CSS-Klassen a:link, a:focus, a:hover, a:active und a:visited mit dem und dem Aussehen erscheinen sollen.

Mir ist klar, dass ich momentan also a:visited, a:hover und a:active als global setze und nicht nur auf #footer beschränke, richtig?

Wie mache ich dies nun aber?

  
#focus a:focus, #footer a:hover, #footer a:active {}  

So etwa?

[Cheatah]

Hi,

Allerdings weiß ich immernoch nicht, wie ich definiere, dass in #footer die CSS-Klassen a:link, a:focus, a:hover, a:active und a:visited mit dem und dem Aussehen erscheinen sollen.

Du weißt, wie Du es mit a:link machst. Jetzt mache es mit den anderen - erst mal immer nur mit einem einzigen. Wenn Du die Selektoren hast, fügst Du sie kommagtrennt zusammen.

Mir ist klar, dass ich momentan also a:visited, a:hover und a:active als global setze und nicht nur auf #footer beschränke, richtig?

Korrekt.

Wie mache ich dies nun aber?

#focus a:focus, #footer a:hover, #footer a:active {}

> So etwa?  
  
Was hat dies für Dich ergeben?  
  
Cheatah  

-- 
X-Self-Code: sh:( fo:} ch:~ rl:| br:> n4:& ie:% mo:) va:) de:] zu:) fl:{ ss:) ls:~ js:|  
X-Self-Code-Url: http://emmanuel.dammerer.at/selfcode.html  
X-Will-Answer-Email: No  
X-Please-Search-Archive-First: Absolutely Yes

[seVes]

And the winner is:

#focus a:focus, #footer a:hover, #footer a:active {}

  
Ich mag Euch! <3  
  
Dankeschön!! :-)  

-- 
Danke & Gruß  
seVes

[EKKi]

Mahlzeit seVes,

Mir ist klar, dass ich momentan also a:visited, a:hover und a:active als global setze und nicht nur auf #footer beschränke, richtig?

Prinzipiell ja.

Wie mache ich dies nun aber?

#focus a:focus, #footer a:hover, #footer a:active {}

> So etwa?  
  
Das würde in etwa bedeuten:  
  
"Das in den geschweiften Klammern Folgende soll gelten für:  
  
- alle fokussierten Links, die sich in einem Element mit der ID 'focus' befinden,  
  
- alle Links, die sich in einem Element mit der ID 'footer' befinden und über denen gerade der Mauszeiger 'schwebt'  
  
- sowie alle aktiven Links, die sich in einem Element mit der ID 'footer' befinden."  
  
Wenn es das ist, was Du erreichen willst, wäre der Code korrekt. Probier's doch einfach aus - kaputtmachen kannst Du nichts. :-)  
  
  
MfG,  
EKKi  

-- 
sh:( fo:| ch:? rl:( br:> n4:~ ie:% mo:} va:) de:] zu:) fl:{ ss:) ls:& js:|

[Cheatah]

Hi,

#footer a:focus, a:hover, a:active {
Sorry, aber irgendwie versteh ich es nicht.

Ist das nicht dasselbe beides?

ja, das ist nicht dasselbe. Der oben genannte Selektor ist (von der Reihenfolge abgesehen) identisch mit:

a:hover, a:active, #footer a:focus {

Erwartest Du hier, dass sich a:hover ausschließlich auf die Links des Footer-Elements bezieht? Nein? Dann erwarte es auch nicht von Deinem Code.

Muss ich also für jede Pseudoklasse seperat

Nein, Du musst lediglich die richtigen Selektoren verwenden.

Cheatah