Mit einem einfachen Aufbau kann ein netter Mouse-Over Effekt erzeugt werden. Dabei werden zwei Elemente definiert, die dann die gleiche Grösse erhalten und das zweite Element vorerst nicht sichtbar ist.
Der HTML-Code:
Das CSS:
div.switch div
{
display: block;
float: left;
}
div.switch
{
position: relative;
}
div.switch div
{
width: 150px;
height: 120px;
}
div.switch div.mouse
{
width: 130px;
height: 100px;
display: none;
position: absolute;
text-align: center;
padding: 10px;
background-image: url(halfwhite.gif);
}
{
display: block;
float: left;
}
div.switch
{
position: relative;
}
div.switch div
{
width: 150px;
height: 120px;
}
div.switch div.mouse
{
width: 130px;
height: 100px;
display: none;
position: absolute;
text-align: center;
padding: 10px;
background-image: url(halfwhite.gif);
}
Und das alles entscheidende Style Sheet:
div.switch:hover div.mouse
{
display: block;
}
{
display: block;
}
Dadurch wird der Block mit dem Text sichtbar gemacht. Zur besseren Sichtbarkeit wird ein halbtransparentes/halbweisses Hintergrundbild verwendet.
Die Dateien können hier heruntergeladen werden:
HTML File switchingblock.html
Grafik head.jpg
Grafik halfwhite.gif
Pingback: Update zu ‘Bildbeschreibung über Bild anzeigen’ « of bits and bytes