CSS table: Highlight a row on rollover, or click, etc....

[jb60606]

does anyone know a row highlighting technique that will work with CSS tables. I need the rows highlighted on a mouse rollover, or atleast a mouse click event. Is this even possible?

 

An AJAX script i've obtained uses a CSS table to organize it's data via multiple "<DIV>" tags. I've since configured the script to retrieve data from a mySQL database and it has become increasingly difficult to distinguish one line of data from the next, even with static row coloring.

 

Thanks in advance.

 

 

 

[ToonMariner]

data should be in tables not div tags - see if you can remove the divs...

 

tr:hover { ... } is what you are after BUT this won't work in IE6 - for that you will need to use js and the onmouseover event handler in the tr tag to set different backgrounds etc.

[jb60606]

Thanks, I figured as much.

 

I've tried replacing the DIV tags with TR/TD tags, etc, though, with the way the Javascript outputs the data, it screwed up the formatting. It's a third party script that I paid for, so I may have to ask/pay them to write a custom script.

 

Thanks

[dbrimlow]

Try by creating a link class as follows (using whatever colors your site uses) in your css:

 

.row a:link, .row a:visited {display:block; background-color:#FFFFFF, color:#000000}

.row a:link, .row a:active{display:block; background-color:#000000, color:#FFFFFF}

 

Now, in your markup, for each row you want to have a hover effect give it a class and blank link:

 

<span class="row"><a href="#">your row data</a></span>

 

This should work if you have already properly listed your main link tags - a:link, a:visited, a:hover, a:active

 

Dave