dolflyer: onmouseoveränderung von tabelle und schrift per css

SELF-Forum

onmouseoveränderung von tabelle und schrift per css

dolflyer
– Informationen zu den Bewertungsregeln

Hallo da!

Ich habe eine Tabelle als Navigationselement.
Bei einem onmouseover der Tabelle (!!!) soll
sich auch die Formatierung des darin stehenden Textes ändern.
Und zwar sollen die Änderungen einem Stylesheet entnommen werden.
So, der HTML-Code sieht bei mir nun so aus:

<table width="100%" border="0" cellspacing="0" cellpadding="0" bgcolor="#003366">
<tr bgcolor="#003366">
    <td colspan="3" class="navi" bgcolor="#003366">
      <div onmouseover="this.className='hover'" onmouseout="this.className='navi'" align="left"><img src="images/trans-dot.gif" width="10" height="1"><a href="javascript:news()" >News</a></div>
    </td>
  </tr>

Das Stylesheet folgendermaßen:
.hover { font-size: 13px; font-weight: bold; background-color: #D2E9FF; font-style: normal; line-height: normal; font-variant: normal; text-transform: none; text-decoration: none}

.navi {  font-family: Arial; font-size: 13px; font-style: normal; text-decoration:none; line-height: normal; font-weight: normal; font-variant: normal; text-transform: capitalize; color: #9FCFFF; text-decoration: none background-color : #003366;}

Das ganze sieht in dieser Version jetzt so aus, dass alles funktioniert bis auf die Farbformatierung des Textes und die text-decoration nimmt er auch nicht.

Weiß da jemand bescheid????

Danke im vorraus,
dolflyer

Beitrag melden
–
Informationen zu den Bewertungsregeln

  1. onmouseoveränderung von tabelle und schrift per css

    Ronny
    – Informationen zu den Bewertungsregeln

    Hi,

    also:

    <td colspan="3" class="navi" bgcolor="#003366">

    ^^^^^^^^^^^
    Des muß da runter:

    <div class="navi" onmouseover="this.className='hover'" onmouseout="this.className='navi'" align="left"><img src="images/trans-dot.gif" width="10" height="1"><a href="javascript:news()" >News</a></div>

    Dann ist das mit dem this.className stimmig.

    .hover { font-size: 13px; font-weight: bold; background-color: #D2E9FF; font-style: normal; line-height: normal; font-variant: normal; text-transform: none; text-decoration: none}

    .navi {  font-family: Arial; font-size: 13px; font-style: normal; text-decoration:none; line-height: normal; font-weight: normal; font-variant: normal; text-transform: capitalize; color: #9FCFFF; text-decoration: none background-color : #003366;}

    ^^^^^ hier fehlt ein ";"

    Da die zwei Angaben hauptsächlich für die Schrift im a-tag gelten, solltest Du das auch auch so angeben:

    .hover a{ font-size: 13px; font-weight: bold; background-color: #D2E9FF; font-style: normal; line-height: normal; font-variant: normal; text-transform: none; text-decoration: none}

    .hover { background-color: #D2E9FF;}

    .navi a{  font-family: Arial; font-size: 13px; font-style: normal; text-decoration:none; line-height: normal; font-weight: normal; font-variant: normal; text-transform: capitalize; color: #9FCFFF; text-decoration: none; background-color : #003366;}

    .navi { background-color : #003366;}

    Und dann das für die Tabellenzelle extra mit .navi usw.
    Jetzt spielt natürlich noch a:visited usw. mit hinein, aber da mußt Du selber ein bißchen herumprobieren, was Du da haben willst.

    Grüße,

    Ronny

    PS: Ich habe es so nur im IE getestet, weil ich hier nix anderes habe )-:

    Beitrag melden
    –
    Informationen zu den Bewertungsregeln