Andreas Korthaus: Tabellen-Zeile und hover

Hallo!

ich bin mir irgendwie nicht ganz schlüssig, welche Methode ich anwenden soll, um Tabellenzeilen beim drüberfahren mit der Maus mit eine andere  Hintergrundfarbe zu verpassen.

Das schönste wäre ja classname.tr:hover, eine wirklich feine Sache im Mozilla, aber der IE kann das noch nicht, also komme ich wohl um Javascript nicht herum. Hier habe ich aber ein paar Fragen:

Erstens, schreibt man lieber

onmouseover="style.backgroundColor = '#FF9933';"

oder

onmouseover="this.style.backgroundColor = '#FF9933';"

?

Und nochwas hierzu, wie ist der vorgesehene Weg um die Farbe wieder zu erntfernen ohen eien neue zu setzen? ist

onmouseout ="style.backgroundColor = ''"

OK?

Aber das ist doof da ich nicht so ohne weiteres mal eben die Farbe überall ändern kann, also eine Mixtur aus CSS und Javascript habe ich gedacht.

onmouseover="this.className = 'meinhover-bgr';"

und hier dasselbe problem, was mache ich das für onmouesout wieder rückgängig?

onmouseout ="this.className = ''"

? Oder

onmouseout ="this.className = 'mout-ohne-bgr';"

aber was um himmelswillen dann in die CSS-Datei schreiben?

.mout-ohne-bgr {
        background-color:
}

oder was? Werde da nicht so richtig schlau. Im Netscape 4 muss es übrigens nicht funktionieren.

Grüße
Andreas

  1. Hi,

    Und nochwas hierzu, wie ist der vorgesehene Weg um die Farbe wieder zu erntfernen ohen eien neue zu setzen? ist

    background-color:transparent;

    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.
    http://mud-guard.de/? http://www.andreas-waechter.de/
  2. Hallo,

    ich bin mir irgendwie nicht ganz schlüssig, welche Methode ich anwenden soll, um Tabellenzeilen beim drüberfahren mit der Maus mit eine andere  Hintergrundfarbe zu verpassen.

    Das schönste wäre ja classname.tr:hover,

    Also, Andreas mag mich korrigieren, aber das sollte tr.classname:hover heißen.

    eine wirklich feine Sache im Mozilla, aber der IE kann das noch nicht, also komme ich wohl um Javascript nicht herum. Hier habe ich aber ein paar Fragen:

    Aber das ist doof da ich nicht so ohne weiteres mal eben die Farbe überall ändern kann, also eine Mixtur aus CSS und Javascript habe ich gedacht.

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
            "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <title></title>
    <script type="text/javascript">
    <!--
    function trhover(tr, status) {
      (status)?tr.style.backgroundColor="red":tr.style.backgroundColor="transparent";
    }
    //-->
    </script>
    <noscript></noscript>
    </head>
    <body>
    <table width="300" border="1">
    <tr onmouseover="trhover(this,true);" onmouseout="trhover(this,false);">
     <td>Zelle</td>
     <td>Zelle</td>
    </tr>
    <tr onmouseover="trhover(this,true);" onmouseout="trhover(this,false);">
     <td>Zelle</td>
     <td>Zelle</td>
    </tr>
    </table>
    </body>
    </html>

    Opera 6.x kann nicht auf "transparent" zurücksetzten.

    viele Grüße

    Axel

    1. Hi,

      Das schönste wäre ja classname.tr:hover,
      Also, Andreas mag mich korrigieren, aber das sollte tr.classname:hover heißen.

      Ne, mag ich nicht. Da hast Du nämlich recht.
      So wie Andreas K. das geschrieben hat, müßte es ja ein
      <classname class="tr">
      geben, das damit formatiert wird, falls die Maus drauf ist...

      <script type="text/javascript">
      <!--
      function trhover(tr, status) {
        (status)?tr.style.backgroundColor="red":tr.style.backgroundColor="transparent";

      tr.style.backgroundColor = (status)?"red":"transparent";
         //ist kürzer und m.E. schöner ;-)

      }
      //-->
      </script>

      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.
      http://mud-guard.de/? http://www.andreas-waechter.de/
      1. Hallo,

        <script type="text/javascript">
        <!--

        var trhovercolor = "red";

        function trhover(tr, status) {

        tr.style.backgroundColor = (status)?trhovercolor:"transparent";

        //ist noch schöner, weil leichter zu pflegen ;-)

        }
        //-->
        </script>

        viele Grüße

        Axel

        1. Hallo!

          Danke Euch!

          Grüße
          Andreas