Gerhard: Anderer Hintergrund und Text bei hover

Beitrag lesen

SELF-Forum

Anderer Hintergrund und Text bei hover

Gerhard
– Informationen zu den Bewertungsregeln

Hallo,
in dem Forum habe ich ein Beispiel gefunden, das ich etwas abgewandelt habe.
Zu diesem habe ich jetzt noch einige Fragen.
Wie erreiche ich, dass der "eine Text" und der "andere Text" jeweils zentriert sind und in der oberen Zeile beginnen?
Wie erreiche ich, dass der rote und (bei hover) der graue Block gleich groß sind?
Und nice to have: Bestimmt sind einige Teile überflüssig?
Gruß
Gerhard

Hier der Quelltext:

  
<html>  
<head>  
<style type="text/css">  
#bild1 {  
    position: absolute;  
    background: #DF0000 no-repeat;  
    width:28%;  
    border:0px;  
    overflow: auto;  
    z-index: 10; visibility: inherit;  
    text-align:center;  
}  
#bild1:hover {  
    display: block;  
    padding: 5px;  
    background: #DFDFDF no-repeat;  
}  
#bild1:hover .an {  
    visibility:hidden;  
}  
#bild1 .aus {  
    visibility:hidden;  
}  
#bild1:hover .aus {  
    visibility:visible;  
}  
</style  
</head>  
<body>  
    <div id="bild1">  
    <a href="......">  
    <span class="an"> der eine Text <br> test</span>  
    <span class="aus"> der andere Text <br> test</span>  
    </a>  
</body>  
</html>
Beitrag melden
–
Informationen zu den Bewertungsregeln