onMouseOver für Tabellenrahmen-Formatierung

[Seven Secrets]

Ich möchte in einer Tabelle eine 3D Effekt erstellen. Das heißt mit:

border-top-color='#ffffff'; border-left-color='#ffffff'; border-right-color='#666666'; border-bottom-color='#666666'; border-width='1px'; border-style='solid';

erstelle ich bei normalen CSS den Rahmen. Wenn ich diesen aber nun in OnMouseOver einbinde passiert nichts! Wo ist hier der Fehler?

 

[Maik]

Wenn ich dich richtig verstehe, möchtest du den Rahmen eines Elements beim Überfahren mit der Maus ändern?

In allen non-IE Browsers funktioniert die Pseudoklasse :hover

div
{
border-top-color: #ff0000;
border-left-color: #ff0000;
border-right-color: #ffff00;
border-bottom-color: #ffff00;
border-width: 1px;
border-style: solid;
}

div:hover
{
border-top-color: #ffff00;
border-left-color: #ffff00;
border-right-color: #ff0000;
border-bottom-color: #ff0000;
border-width: 1px;
border-style: solid;
}

<div>test</div>

Für den IE wird leider Javascript benötigt.

div.normal
{
border-top-color: #ff0000;
border-left-color: #ff0000;
border-right-color: #ffff00;
border-bottom-color: #ffff00;
border-width: 1px;
border-style: solid;
}

div.hover
{
border-top-color: #ffff00;
border-left-color: #ffff00;
border-right-color: #ff0000;
border-bottom-color: #ff0000;
border-width: 1px;
border-style: solid;
}

<div class="normal" onmouseover="this.className='hover'" onmouseout="this.className='normal'">Test</div>

Anmerkung: diese Technik funktioniert auch in den non-IE Browsers FireFox, Mozilla, Netscape und Opera.

 

[Seven Secrets]

Das hast du richtig verstanden, nun ist die Frage, wird Javascript nicht als unsicher geblockt?

 

[Maik]

Bei deaktiviertem Javascript funktioniert die zuletzt gezeigte Methode nicht.

 

[Seven Secrets]

Das ist ja auch das Problem! Ich wollte es so anstellen, daß es ohne Javascript auskommt!

 

[Maik]

Wie gesagt, für die non-IE Browsers FireFox, Mozilla, Netscape und Opera kann die Pseudoklasse :hover verwendet werden. Für den IE ist leider Javascript, oder ein Workaround mit 'blinden' Links (Stichwort a:hover) erforderlich.