Hover effekt mit css spuckt :(

[rasengan374]

Hallo zusammen

Ich versuche gerade der Navigation meiner Website einen Hover Effekt zuzuweisen, mit folgendem Code:
html:

<ul id="navigation">
<li>
<a href="http://www.google.ch">Google</a></li>
<li>
<a href="http://www.youtube.com">Youtube</a></li>
<li>
<a href="http://www.webfail.at">Webfail</a></li>
</ul>

und das ist mein css code:

#navigation{
list-style: none;
margin: 0;
padding: 0;
float: left;

}

#navigation li a{
color: White;
background-color: 2F4F4F;
font-size: 12pt;
font-family: Arial;
display: block;
width: 92px;
height: 30px;
text-align: center;
text-decoration: none;
border-left: 1px solid BEBEBE;
border-right: 1px solid 141414;
}

#navigation:hover a{
color: black;
background-color: 7FFF00;
font-size: 12pt;
font-family: Arial;
display: block;
width: 92px;
height: 30px;
text-align: center;
text-decoration: none;
border-left: 1px solid 9ACD32;
border-right: 1px solid 66CD00;
}

allerdings ändert nur die Schtiftfarbe des Links, und es wird weder der Border noch der Hintergrund korrekt angezigt, kann mir einer helfen?
(wenn möglich soll die Navigation Horizontal sein)

[Matthias Apsel]

Om nah hoo pez nyeetz, rasengan374!

#navigation li a{

#navigation:hover a{

}

allerdings ändert nur die Schtiftfarbe des Links, und es wird weder der Border noch der Hintergrund korrekt angezigt, kann mir einer helfen?

ohne es angeschaut zu haben:

#nav li a ist spezifischer als #nav:hover a

Du möchtest zudem sicher die Linkelemente hovern. Da (wahrscheinlich) in der Navigation alle Links innerhalb einer Liste sein werden, könntest du

#nav a und #nav a:hover verwenden.

Matthias

[MudGuard]

Hi,

#nav li a ist spezifischer als #nav:hover a

Ist das so?
1. count 1 if the declaration is from is a 'style' attribute rather than a rule with a selector, 0 otherwise (= a)

ergibt 0 für beide.

2. count the number of ID attributes in the selector (= b)

ergibt 1 für beide

3. count the number of other attributes and pseudo-classes in the selector (= c)

ergibt 0 für den ersten, 1 für den zweiten Selector.

4. count the number of element names and pseudo-elements in the selector (= d)

ergibt 2 für den ersten, 1 für den zweiten Selector.

5. Concatenating the four numbers a-b-c-d (in a number system with a large base) gives the specificity.

0-1-0-2 bzw. 102 für den ersten, 0-1-1-1 bzw. 111 für den zweiten.

Damit ist der zweite, also '#nav:hover a', spezifischer, da 111 > 102.

cu,
Andreas

[Matthias Apsel]

Om nah hoo pez nyeetz, MudGuard!

Hi,

#nav li a ist spezifischer als #nav:hover a

Ist das so?

<schäm>Nur wenn man c und d vertauscht</schäm>

Matthias

[MudGuard]

Hi,

background-color: 2F4F4F;
border-left: 1px solid BEBEBE;
border-right: 1px solid 141414;

ungültige Werte, muß ignoriert werden.

background-color: 7FFF00;
border-left: 1px solid 9ACD32;
border-right: 1px solid 66CD00;

ungültige Werte, muß ignoriert werden.

font-size: 12pt;

Machst Du Druck-Design? Weil pt am Bildschirm eher nicht sinnvoll ist.

font-family: Arial;

Hier sollte noch die generische Schriftfamilie (hier: sans-serif) angegeben werden.

cu,
Andreas

[Gunnar Bittersmann]

@@rasengan374:

nuqneH

Hover effekt mit css spuckt :(

Da bleibt mir glatt die Spucke weg.

Ich versuche gerade der Navigation meiner Website einen Hover Effekt zuzuweisen

Würdest du dem Effekt auch bitte einen Bindestrich zuweisen?

Qapla'