Anderer Hintergrund und Text bei hover

[Der Martin]

Hi,

Wie erreiche ich, dass der "eine Text" und der "andere Text" jeweils zentriert sind

mit der Eigenschaft text-align, angewendet auf das Elternelement.

und in der oberen Zeile beginnen?

Das ergibt sich automatisch, wenn du mit display anstatt mit visibility arbeitest.

Wie erreiche ich, dass der rote und (bei hover) der graue Block gleich groß sind?

Indem du die Größe unabhängig von :hover festlegst.

Und nice to have: Bestimmt sind einige Teile überflüssig?

Ja, zum Beispiel das umgebende div, zu dem außerdem das End-Tag fehlt. Selektiere doch direkt das a-Element, formatiere es als display:block, und gib ihm eine konstante Größe. Auch :hover würde ich dann auf das a-Element anwenden und nicht auf das div, dann versteht's auch der IE.

Schließlich kannst du noch die beiden spans optisch austauschen, indem du sie abhängig von a:hover jeweils auf diaplay:inline oder display:none setzt:

<a id="bild1" href="">
<span class="an">Text1</span>
<span class="aus">Text2</span>
</a>

a#bild1           /* Grundeigenschaften (Anzeigeart, Größe, Hintergrund) */
 { display: block;
   width:   8em;
   height:  1.5em;
   background-color: #DF0000;
   text-align: center;
 }
a#bild:hover      /* Abweichende Eigenschaften bei :hover (Hintergrund) */
 { background-color: #DFDFDF;
 }
a#bild .an        /* Eigenschaften des "an"-Textes */
 { display: inline;
 }
a#bild:hover .an  /* Eigenschaften des "an"-Textes beim Hovern */
 { display: none;
 }
a#bild .aus       /* Eigenschaften des "aus"-Textes */
 { display: none;
 }
a#bild:hover .aus /* Eigenschaften des "aus"-Textes beim Hovern */
 { display: inline;
 }

Ob das nun kürzer ist als deine Variante, weiß ich nicht. Aber zumindest erscheint es mir logischer.

So long,
 Martin