Nu da du har spurgt i javascript, får du en løsning der involverer dette:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "
http://www.w3.org/TR/html4/strict.dtd"><html>
<head>
<meta http-equiv="Content-type" content="text/html;charset=UTF-8">
<title>Style Hover</title>
<style type="text/css">
body {background-color: peachPuff; font-family : sans-serif;}
table, th, tr, td {border: 1px solid pink; border-collapse: collapse; padding: 2px 8px 2px 8px; background-color: red; color: white;}
</style>
<script type="text/javascript">
function setHoverStyle(elm) {
elm.style.backgroundColor = "white";
elm.style.color = "red";
}
function setNormalStyle(elm) {
elm.style.backgroundColor = "red";
elm.style.color = "white";
}
</script>
</head>
<body>
<div>
<table>
<tr><td onmouseover="setHoverStyle(this);" onmouseout="setNormalStyle(this);" >Hej</td></tr>
<tr><td onmouseover="setHoverStyle(this);" onmouseout="setNormalStyle(this);" >Halli</td></tr>
<tr><td onmouseover="setHoverStyle(this);" onmouseout="setNormalStyle(this);" >Hallo</td></tr>
<tr><td onmouseover="setHoverStyle(this);" onmouseout="setNormalStyle(this);" >Heisan</td></tr>
<tr><td onmouseover="setHoverStyle(this);" onmouseout="setNormalStyle(this);" >allo allo</td></tr>
<tr><td onmouseover="setHoverStyle(this);" onmouseout="setNormalStyle(this);" >Mojn</td></tr>
<tr><td onmouseover="setHoverStyle(this);" onmouseout="setNormalStyle(this);" onclick="alert('du har klikket på link');">LinkDemo</td></tr>
</table>
</div>
</body>
</html>
Hvis du spørger i CSS kategorien, kan det sikkert også laves v.h.a. class definitioner, og uden javascript.