Sådan virker det med alle mulige style-indstillinger, jeg har lavet det i en udgave, som er aldeles ligeglad med hvor mange alternerende farver og andre styles, du bruger ...
I denne udgave ligger styles i dokumentet, men du kan bare definere dine styles i et eksternt dokument, den skulle finde dem under alle omstændigheder !-)
Dog skal du være opmærksom på, at en senere forekomst af en rule aldeles vil overskrive en tidligere, så det er bedst uden gengangere ...
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"
http://www.w3.org/TR/html4/loose.dtd"><html>
<head>
<title>Alternative rækker m. hover i css</title>
<meta name="keywords" content="roenving,
http://www.eksperten.dk/spm/517509"><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
html,body{height:100%;margin:0px;border:0px;padding:0px;font-family:tahoma,verdana,arial,sans-serif;font-size:small;}
.trFirst{background:#eee;}
.trSecond{background:#ddd;}
.trThird{background:#ccc;}
.trHover{background:#aaa;color:white;}
</style>
<script language="javascript" type="text/javascript">
var styledefs = ['trFirst','trSecond','trThird','trHover'];//Class-names of the styles. The last is the hover-style
var styles = new Array();
function hoverColor(){
//retrieve the actual style-definitions
var s = document.styleSheets;
for(i=0;s.length>i;i++){
var r = (s[i].cssRules)?s[i].cssRules:s[i].rules;
for(j=0;r.length>j;j++){
for(k=0;styledefs.length>k;k++){
if(r[j].selectorText.indexOf("."+styledefs[k])>-1){
st = r[j].style;
styles[k] = new Array();
for(x in st){
styles[k][x] = st[x];
}
}
}
}
}
}
function trHover(elm){
var n = styles.length-1;
for(x in styles[n]){
if(styles[n][x])elm.style[x] = styles[n][x];
}
}
function trOut(elm){
var n;
for(i=0;styledefs.length>i;i++){
if(elm.className.indexOf(styledefs[i])>-1){
n=i;
break;
}
}
for(x in styles[n]){
if(styles[n][x])elm.style[x] = styles[n][x];
}
}
</script>
</head>
<body onload="hoverColor();">
<table id="altColor">
<tr class="trFirst" onmouseover="trHover(this)" onmouseout="trOut(this)">
<td>Ulige1</td>
<td>Ulige2</td>
<td>Ulige3</td>
<td>Ulige4</td>
</tr>
<tr class="trSecond" onmouseover="trHover(this)" onmouseout="trOut(this)">
<td>Lige1</td>
<td>Lige2</td>
<td>Lige3</td>
<td>Lige4</td>
</tr>
<tr class="trThird" onmouseover="trHover(this)" onmouseout="trOut(this)">
<td>Lige1</td>
<td>Lige2</td>
<td>Lige3</td>
<td>Lige4</td>
</tr>
</table>
</body>
</html>
