Hover effekt mit css spuckt :(
rasengan374
- css
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)
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
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
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
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
@@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'