a:hover Frage

[Zaolat]

Moin Moin,

ich habe eine Navibar in html als UL aufgebaut

<div class="navi">
<ul>
<li><a href="#">test</a></li>
<li><a href="#">test</a></li>
<li><a href="#">test</a></li>
</ul>
</div>

Diese wird mit CSS als horizontale Navigation dargestellt.

Nun möchte ich den Effekt mit CSS beim Hovern erzielen, dass beim rüberfahren mit der Maus, der jeweilige Punkt (also in dem Fall das Wort "test") einige Pixel nach oben fährt und darunter ein farblicher Rahmen erfolgt.

Bisher sieht mein CSS Code so aus:

.navi a:hover {
text-decoration: none;
border-bottom-width: 10px;
border-bottom-style: solid;
border-bottom-color: #33CC62;
}

Jetzt habe ich schon verschiedenes probiert, doch bekomme ich es nicht hin, dass das Wort einige Pixel nach oben fährt. Gehe ich das falsch an, oder was übersehe ich hier?

Schöne Grüße aus dem Hohen Norden

 

[ADcosmos]

AW: a:hover Frage

Hi,

wie wäre es mit:

position: relative;
top: -10px;

MFG ADcosmos

 

[patrick_l]

AW: a:hover Frage

Wenn ich das richtig sehe, muss du auch im CSS die Liste ansprechen.

.navi ul li a:hover {
    border-bottom: 10px #33CC62 solid;
    margin-bottom: 5px; 
}

Grüße Patrick

Edit:
Hab nicht an Position gedacht

 

[Mereel]

AW: a:hover Frage

Du könntest zum Beispiel folgendes versuchen:

a {
padding-top:10px;
}

a:hover {
padding-top:0; 
}

Bei hover wandert der text dann 10px nach oben und unten erschienen die 10px border.
Keine Ahnung, ob es vielleicht noch elegantere Lösungen gibt, aber das ist mir gerade so spontan dazu eingefallen.

Viele grüße,

Mereel

Edit: Da war ich ja eh zu langsam

 

[Zaolat]

AW: a:hover Frage

Danke Dir ADcosmos
Funktioniert.
Hatte beim testen vergessen die Position relativ zu setzten.

 

[Myhar]

AW: a:hover Frage

Erstens @derOtto: Er hat schon korrekt die a Tags in der Navigation angesprochen.

Zweitens: position:relative ist doch der Standardwert. Wieso setzt du deine Navigation überhaupt auf position:absolute? In 99% der Fälle, wo position:absolute eingesetzt wird, ist dies nicht notwendig. Vor allem bei einer horizontalen Navigation verwundert mich das doch ein wenig.

 

[Zaolat]

AW: a:hover Frage

Hy Myhar,

ich nutze DW und habe den wert Position bisher selten eingestellt. Demnach war dieser nicht definiert. Ist es in dem Fall denn immer so, dass die Position Absolute entspricht?

 

[Myhar]

AW: a:hover Frage

position:relative ist doch der Standardwert.

Soviel zu deiner Frage, ob absolute der Initialwert für position ist.
Wenn du mit Firebug oder einem anderen Webdeveloper Tool (abgesehen dem vom IE) das Element untersuchst, siehst du, welchen Wert das Element für position hat. Wenn hier absolut als Wert angezeigt wird, frage ich mich, wieso das der Fall ist.

 

[simonpicos]

AW: a:hover Frage

Zweitens: position:relative ist doch der Standardwert.

nope. schau mal da in der Tabelle unter default value: http://w3schools.com/cssref/pr_class_position.asp

 

[Myhar]

AW: a:hover Frage

Ja, da hast du Recht. Verzeihung, wenn ich jemanden verwirrt habe
Irgendwie war ich der Meinung, dass es anders wäre.