Link Hover Effekt bei selbst definiertem CSS?

[Katharina]

Hallo,

ich bin totaler Newbie mit CSS und bekomme es nicht hin, dass ein einfacher Link von mir mit der Pseudoklasse hover angezeigt wird.

Das ist das CSS:

#zurueck
{
 display   : block;
 width   : 100%;
 padding-top  : 25px;
 padding-left : 15px;
 padding-bottom : 10px;
 background-color: #C1CDD4;
 color   : #ffffff;
 font-weight  : bold;
 width   : 170px;
}

#zurueck a:hover
{
 color   : #FF0000;
}

Der Link in HTML sieht so aus:

<a id="zurueck"  onMouseOver="style.cursor = 'pointer'"> zur&uuml;ck</a>

Nun sollte bei RollOver die Linkfarbe rot werden.
Aber hier werde nur ich rot gerade.

Kisses,
Kati

[Gunnar Bittersmann]

#zurueck a:hover

Katharina,
Das selektiert a-Elemente _innerhalb_ des Elements mit der ID 'zurueck'. (Solche gibt’s nichts.)

<a id="zurueck"  onMouseOver="style.cursor = 'pointer'"> zur&uuml;ck</a>

Da die cursor-Eigenschaft für den Link sowieso nur relevant ist, wenn man mit der Maus drüberfährt, ist der Einsatz des Eventhandlers und JavaScript hier völlig unnötig. Setze die cursor-Eigenschaft ganz einfach im Stylesheet.

Live long and prosper,
Gunnar

[Axel Benkert]

#zurueck a:hover

Katharina,
Das selektiert a-Elemente _innerhalb_ des Elements mit der ID 'zurueck'. (Solche gibt’s nichts.)

<a id="zurueck"  onMouseOver="style.cursor = 'pointer'"> zur&uuml;ck</a>

Da die cursor-Eigenschaft für den Link sowieso nur relevant ist, wenn man mit der Maus drüberfährt, ist der Einsatz des Eventhandlers und JavaScript hier völlig unnötig. Setze die cursor-Eigenschaft ganz einfach im Stylesheet.

Live long and prosper,
Gunnar

Versuchs mal so:

<style type="text/css">
#zurueck {
 display   : block;
 width   : 100%;
 padding-top  : 25px;
 padding-left : 15px;
 padding-bottom : 10px;
 background-color: #C1CDD4;
 color   : #ffffff;
 font-weight  : bold;
 width   : 170px;
}

#zurueck:hover {
 color   : #FF0000;
 cursor  : pointer;
}
</style>

<a id="zurueck" href="#"> zur&uuml;ck</a>

[Katharina]

Wie immer schnell und super kompetent von Euch beantwortet - Ihr seid klasse!

Kuß,
Kati

[Katharina]

Jetzt sehe ich gerade, dass es im IE wohl nicht funktioniert, also, der Hover wird nicht angezeigt....

Kati

[Gunnar Bittersmann]

Jetzt sehe ich gerade, dass es im IE wohl nicht funktioniert, also, der Hover wird nicht angezeigt....

Ja, Kati, der IE wendet :hover nur für Links an, d.h. nur für a-Elemente mit href-Attribut.

Live long and prosper,
Gunnar

[wahsaga]

hi,

#zurueck a:hover

Dieser Selektor würde auf einen _in_ dem Element mit der id="zurueck" _enthaltenen_ Link zutreffen:

<element id="zurueck"><a ...></a></element>

Aber hier werde nur ich rot gerade.

Beschäftige dich näher mit den verschiedenen Selektoren und ihrer Bedeutung.
(Für CSS 2 auf deutsch: http://www.edition-w3c.de/TR/1998/REC-CSS2-19980512/kap05.html)

gruß,
wahsaga

[carla]

#zurueck
{
}

#zurueck a:hover
{
color   : #FF0000;
}

Nun sollte bei RollOver die Linkfarbe rot werden.
Aber hier werde nur ich rot gerade.

Wird einwandfrei rot, dein Link. Hast du nach "#zurueck a:hover" noch irgend ein "#zurueck a" definiert? Denn die Reihenfolge ist bei Linkselektoren wichtig, die Spezifikation zu CSS2 empfiehlt "link, visited, hover, active".

[carla]

Hoppala...

<a id="zurueck"…
Vor lauter CSS das HTML nicht angekuckt :-)