Sebastian: Tabellen bei Mouseover einfärben

Hallo,

ich habe eine Tabelle auf meiner Website, genauergesagt eine Spalte mit 10 Zeilen. Nun soll bei einem Mouseover über eine der Zeilen, die entsprechende Zeile eingefärbt werden.

Wie geht sowas ??

Hat jemand Bespiele ??

DANKE !

MFG
Sebastian

  1. Hallo,

    Wie geht sowas ??

    Am Besten mit CSS.

    Hat jemand Bespiele ??

    Jup, mein Probeboard : http://testforum.acid4u.com/

    Hier wären meine CSS Zuweisungen für diesen Effekt. Du kannst es sicher für deine Zwecke weiterverwenden.

    a.topiclink:link {font-family:Verdana, sans-serif; font-size:11px; color:#D7F5FF; font-weight:bold; text-decoration:underline; line-height:30px; height:30px; width:100%; display:block}
     a.topiclink:visited {font-family:Verdana, sans-serif; font-size:11px; color:#B3B3FF; text-decoration:none; line-height:30px; height:30px; width:100%; display:block}
     a.topiclink:hover {font-family:Verdana, sans-serif; font-size:11px; color:#D7F5FF; text-decoration:underline; line-height:30px; height:30px; width:100%; display:block; background-color:#003264}
     a.topiclink:active {font-family:Verdana, sans-serif; font-size:11px; color:#9393FF; text-decoration:underline; line-height:30px; height:30px; width:100%; display:block}
     a.topiclink:focus {font-family:Verdana, sans-serif; font-size:11px; color:#9393FF; text-decoration:underline; line-height:30px; height:30px; width:100%; display:block}

    width:100% habe ich angeben müssen, weil der IE sonst zu blöd ist, dass man mit der Tabellenzellen die Links klickt.

    $xNeTworKx.

    --
    Mit Computern lösen wir Probleme, die wir ohne sie gar nicht hätten.
  2. ins <td>:

    <td onmouseover="this.style.background='#ffffff'" onmouseout="this.style.background='#000000'">

    mfg

    1. Hi,

      wo soll da genau der Code von dir rein ???

      <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
      <html>
      <head>
      <title>Untitled Document</title>
      <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
      </head>

      <body>
      <table width="29%" border="0" cellspacing="0" cellpadding="0">
        <tr>
          <td>Zeile 1</td>
        </tr>
        <tr>
          <td>Zeile 2</td>
        </tr>
        <tr>
          <td>Zeile 3</td>
        </tr>
      </table>
      </body>
      </html>

      1. war ich so undeutlich???

        ins <td>!!!!

        <table width="29%" border="0" cellspacing="0" cellpadding="0">
          <tr>
            <td onmouseover="this.style.background='#ffffff'" onmouseout="this.style.background='#000000'" style="background:#000000">Zeile 1</td>
          </tr>
          <tr>
            <td>Zeile 2</td>
          </tr>
          <tr>
            <td>Zeile 3</td>
          </tr>
        </table>

        Bemerkung zur Lösung von $xNeTworKx:
        geht natürlich auch, wie man sieht. geht aber nur wenn in dem <td> ein link drin steht. denn dieser wird eingefärbt, nicht die Tabellentzelle. außerdem muss man den link dann auf die Breite der Tabelle setzen.
        Lös es wie du willst.

        Christian

        1. Danke schön für Deine Hilfe!

  3. Hi,

    ich habe eine Tabelle auf meiner Website, genauergesagt eine Spalte mit 10 Zeilen. Nun soll bei einem Mouseover über eine der Zeilen, die entsprechende Zeile eingefärbt werden.

    tr:hover { background-color:red; }

    Moderne Browser können das. Der IE ist kein moderner Browser.

    cu,
    Andreas

    --
    Der Optimist: Das Glas  ist halbvoll.  - Der Pessimist: Das Glas ist halbleer. - Der Ingenieur: Das Glas ist doppelt so groß wie nötig.