Mouseover Effekte bei einer Tabelle

Status
Nicht offen für weitere Antworten.
T

TheSearch

Grünschnabel
Hallo!

Die Frage ist ziehmlich blöde... aber ich find die Lösung einfach nicht?!

Ich möchte in einer Tabelle Mouseover Effekte einfügen und zwar wenn die Maus über das Feld geht soll das gesamte Feld und die Schrift die Farbe ändern. Ich habs mit CSS probiert aber irgendwie gings nicht.... wahrscheinlich war ich zu blöd*g*
Ich habe mal eine Seite angefügt wie es aussehen soll...

Danke im Vorraus!

Mfg
 

Anhänge

Code: 
<html>
<head>
	<title>Untitled</title>
<script type="text/javascript" language="JavaScript1.2">
function an(wer)
{
document.getElementById(wer).bgColor = 'yellow';
document.getElementById(wer).style.color = 'red';
}
function aus(wer)
{
document.getElementById(wer).bgColor = 'white';
document.getElementById(wer).style.color = 'black';
}
</script>
</head>
<body>
<table cellspacing="2" cellpadding="2" border="1">
<tr id="eins" onmouseover="an('eins')" onmouseout="aus('eins')">
    <td>Zeile 1</td>
</tr>
<tr id="zwei" onmouseover="an('zwei')" onmouseout="aus('zwei')">
    <td>Zeile 2</td>
</tr>
<tr id="drei" onmouseover="an('drei')" onmouseout="aus('drei')">
    <td>Zeile 3</td>
</tr>
</table>



</body>
</html>
 
Im Mozilla geht sogar das:
PHP: 
<!DOCTYPE HTML PUBLIC "-//W3C/DTD HTML 4.1 Transtitional//EN">
<html>
<head>
<style type="text/css">

.zelle {
  background-color: #000000;
  color: #FFFFFF;
  font-family: Arial;
}

.zelle:hover {
  background-color: #0000FF;
  color: #F0F0F0;
  font-family: Times New Roman;
}

</style>
</head>
<body>

<table width="400" height="400">
    <tr>
        <td class="zelle">&nbsp; bla bla</td>
        <td>blabla</td>
        <td>gh</td>
    </tr>
</table>

</body>
</html>
 
Original geschrieben von Fabian Hofmann
Im Mozilla geht sogar das:
PHP: 
<!DOCTYPE HTML PUBLIC "-//W3C/DTD HTML 4.1 Transtitional//EN">
<html>
<head>
<style type="text/css">

.zelle {
  background-color: #000000;
  color: #FFFFFF;
  font-family: Arial;
}

.zelle:hover {
  background-color: #0000FF;
  color: #F0F0F0;
  font-family: Times New Roman;
}

</style>
</head>
<body>

<table width="400" height="400">
    <tr>
        <td class="zelle">&nbsp; bla bla</td>
        <td>blabla</td>
        <td>gh</td>
    </tr>
</table>

</body>
</html>
Zum Vergrößern anklicken....

In Opera auch, jedoch im IE nicht
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück