Tabellen-Zeile und hover
Andreas Korthaus
- javascript
0 MudGuard0 Axel Richter
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
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
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
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
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
Hallo!
Danke Euch!
Grüße
Andreas