Hover!

Kennen Sie "Hover!"? Nein, hier handelt es sich nicht um eine CSS-Anweisung, sondern um ein Computerspiel, das auf jeder Windows 95-CD vorhanden war:

Bild: Screenshot des Hover!-Splashscreen

Aber wir wollen uns hier erst um das Nagigationsmenü kümmern, spielen können wir später! Der kleine Kasten mit dem roten Rand links oben wird beim Hovern ausgefahren und zeigt ein Navigationsmenü. Außer beim IE 7! Da tut sich nichts! Die CSS-Anweisung für den DIV mit der ID "navi" lauten:


div#navi {
 background : transparent
              url(dot.gif)
              repeat
              center;
 width : 170px;
 position : fixed;
 left : -150px;
 border : 1px solid red;
}
div#navi:hover { 
 width : 170px;
 position : fixed;
 left : 0;
 border : 1px solid red;
}

Bei obigen Anweisungen passiert beim IE 7 nichts. Bei den folgenden schon:


/* Style hover1.html */
div#navi {
 background : transparent
              url(dot.gif)
              repeat
              center;
 width : 170px;
 position : fixed;
 left : -150px;
 border : 1px solid red;
}
div#navi:hover { 
 width : 170px;
 position : fixed;
 left : 0;
 border : 1px solid green;
}

Hier wurde im unteren DIV nur die Borderfarbe von rot auf grün geändert. Weiter:


/* Style hover2.html */
div#navi {
 background : transparent
              url(dot.gif)
              repeat
              center;
 width : 170px;
 position : fixed;
 left : -150px;
 border : 1px solid red;
}
div#navi:hover { 
 width : 170px;
 position : fixed;
 left : 0;
}

Hier fehlt die Border-Angabe im :hover-Block, IE 7 hovert nicht. Fügt man "border:none;" hinzu, wird gehovert:


/* Style hover3.html */
div#navi {
 background : transparent
              url(dot.gif)
              repeat
              center;
 width : 170px;
 position : fixed;
 left : -150px;
 border : 1px solid red;
}
div#navi:hover { 
 width : 170px;
 position : fixed;
 left : 0;
 border : none;
}

Dagegen wird gehovert, wenn im ersten Block kein Border angegeben ist, dafür aber im zweiten:


/* Style hover4.html */
div#navi {
 background : transparent
              url(dot.gif)
              repeat
              center;
 width : 170px;
 position : fixed;
 left : -150px;
}
div#navi:hover { 
 width : 170px;
 position : fixed;
 left : 0;
 border : 1px solid red;
}

Und jetzt zu den Testseiten: