Verschiebung eines Hintergrundbildes bei Links (hover)

[Enrico]

Guten Morgen,

ich habe auf der Seite http://featherpot.com/tutorials/how-to-make-sexy-sliding-door-buttons-with-css/ eine sehr interessante Methode gefunden, Schaltflächen mit reinem css-Code und nur 2 Grafiken zu erzeugen.

Auf dieser Seite wird der weitere Zustand "active" berücksichtigt.

Ich möchte diesen Mechanismus um den weiteren Zustand "hover" ergänzen, was aber leider nicht klappt, ich habe für onmouseout und hover das gleiche Hintergrundbild, obwohl ich doch korrekt angegeben haben müsste, dass das Hintergrundbild um 30px nach unten verschoben werden soll, der Zustand "active" hingegen klappt wieder:

a.button
   {
      background: transparent url(Hintergrund_Schaltflaechen_a.png) no-repeat scroll top right;
   }

a.button span
   {
      background: transparent url(Hintergrund_Schaltflaechen_span.png) no-repeat;
      line-height: 30px;
   }

a.button:hover
   {
      background-position: 30px right;
   }

a.button:hover span
   {
      background-position: 30px left;
   }

a.button:active
   {
      background-position: bottom right;
   }

a.button:active span
   {
      background-position: bottom left;
   }

<a class="button" href="#"><span>TEST</span></a>

Ich habe den css-Code auf "line-height" und "background-position" reduziert, da die übrigen Angaben hier keine Rolle spielen dürften, da diese nur die Optik der Links (Schriftart, Farbe,...) weiter festlegen, auf mein Problem aber keinen Einfluss haben dürften.

Die Grafiken der verschiedenen Zustände sind jeweils 30px hoch, sodass ich, analog der Beispielseite, 2 Grafiken habe, die jeweils insgesamt 90px hoch sind.

Zur Verdeutlichung habe ich unter http://rapidshare.de/files/43437820/Sliding_door.zip.html die Dateien mal gezippt hochgeladen.

Könnt ihr mir hier weiterhelfen und mir sagen, warum die Verschiebung des Hintergrundbildes um 30px nach unten beim Zustand "hover" nicht klappt?

Vielen lieben Dank im Voraus und Gruß
Enrico

[ChrisB]

Hi,

a.button:hover
   {
      background-position: 30px right;

background-position:
"If at least one value is not a keyword, then the first value represents the horizontal position and the second represents the vertical position."

(Auch CSS kann und sollte man validieren!)

Weiss nicht, ob's daran liegt -

Zur Verdeutlichung habe ich unter http://rapidshare.de/files/43437820/Sliding_door.zip.html die Dateien mal gezippt hochgeladen.

• aber das ich mir Dateien bei Rapidshare runterlade, um dein Beispiel vollstaendig analysieren zu koennen, das kannste knicken.

MfG ChrisB