highlight alternating color rows w/hover class

[mikeistyke]

here is the html and the asp:

...connection strings and sql, blah blah
<Table class="dblist">
<TR class="dbrow">
<TD>Manufacturers</TD>
</TR>
<%
While Not objRS.EOF
intLineNum = intLineNum + 1
If intLineNum Mod 2 = 0 Then
strLineColor = strEvenColor
Else
strLineColor = strOddColor
End If
%>
<TR <%=strLineColor%>>
<TD class="dbdata"><a href="<%= (objRS("WebAddress")) %>"><%= objRS("Name") %></a></TD>
</TR>
<%
strLineColor alternates the row colors. All works well.
What i'd like to do is add an a:hover to the css code, so when the mouse passes over the colored rows it will appear as a highlight or third color. Here is the css.
# #dblist {

* border : 1px;
* border-color : #000000;
* border-collapse : collapse;
}
# tr.dbrow {

* border : 1px;
* background-color : #ff7200;
* font-family : Verdana, Tahoma, Sans;
* font-size : small;
* font-weight : bolder;
* text-align : center;
* text-decoration : none;
}
# td.dbdata {

* font-family : Verdana, Tahoma, Sans;
* font-size : smaller;
* font-weight : bolder;
* text-align : left;
}
Thank you all in advance for your help.

[mikeistyke]

I'm including the url for visual inspection and clarity. I forgot to place it in the original post.
I'm a first time post, all errors are mine.

[littlecandyshop.com...]

[Robin_reala]

Welcome to WebmasterWorld mikeistyke!

(first off, personal URLs aren't allowed here)

To answer your question, IE won't hover over anything that's not an <a> element so we have to use some javascript. Assuming you give your <table> and id attribute of 'mytable', this'll fit the bill:

mytable = document.getElementById('mytable');
rows = mytable.getElementsByTagName('tr');
for (i=0; i<rows.length; i++; ) {
rows[i].onmouseover = 'this.className+=" over";';
rows[i].onmouseout = 'this.className=this.className.replace(new RegExp("\\bover\\b"), "");';
}

And then in your CSS:

tr:hover, tr.over { background-color: whatever; }

As a technical explanation, the Javascript loops through all the rows and adds a small function which either adds or removes a value of 'over' from the class attribute on hover (this works fine with the multiple classes you'll have from your even/odd rows). In the CSS you'll see that we've got a tr:hover which'll give the same effect for users of modern browsers who've got CSS on and Javascript off.

Hope this helps, but let me know if you're still having problems.

[mikeistyke]

I apologize for the url. I never read the rules. Go figure.
Thanks for your help. Look at the code sample I provided. The href references the database field.
Knowing what we know now, how do I make a mouseover reference to a "third" color in my css sheet without resorting to javascript?
Just to recap. The two alternating colors from the db fields works FINE. I wanted to add an a:hover to the table td tag. Hope this helps.
Thanks again for the help.

[Robin_reala]

If you're only got the one cell then I'm not sure what the problem is, just do a normal a:hover. E.g.:

td.dbdata a:hover { background-color: #whatever; }

Does that help?

N.b., the previous Javascript is only needed for IE. Other browsers will handle the code fine. Also, it'd help if you posted only the output code (not the ASP) and that's what we're dealing with here. I think I can see your problem though regardless.

[mikeistyke]

Thank you, Robin.
I'm beginning to use "all" of css, in fact i'm in the process of validating all the pages.
Using child elements of parents can be a tricky thing when it comes to inheritance. I'm beginning to "get" it a little bit more these days.
Thanks again for your help. I got one more problem to address shortly concerning a portion of the code already posted.