change hover color in table rows

[autofocus]

Hi
i have a table with around 50+ rows and 7 columns .
how i can change the color of row when i hover over it.

thanks

[twQ]

In the CSS you can just use:

CSS:

tr:hover {
background: #000000;
}

That will NOT work in Internet Explorer 6 (not sure about above) because it does not support :hover on block elements (that I'm aware of), tested and does work in Firefox.

If you have more than one table on the page your using it on and want only a specific table to show the effect give each table a unique id, like so:

HTML:

<table id="uniqueIDgoeshere">
....

and then add this instead of the above CSS:

CSS:

#uniqueIDgoeshere tr:hover {
background: #000000;
}

The red area is where your unique ID you created goes.

If you want to make each column a different color it gets easier. Give each column it's unique id then, use this CSS (note that when using this method to give a column a unique color it will only work on one table so the above step for using one table only is not necessary):

CSS:

#uniqueIDgoeshere:hover {
background: #000000;
}

You could also use JavaScript to accomplish this, but CSS is probably best.

JavaScript:

<tr onmouseover="this.style.background='#000000';">
....

Is that what you're looking for?

[autofocus]

thanks for help.
IE is pain, it only support a:hover tag. i wanted to avoid using javascript but i think i have to use

thanks

[twQ]

Not a problem. Yea I agree with you there! I might suggest ditching Internet Explorer 6 support if your intended audience probably won't be running it, or if this feature isn't necessary for the functioning of your site.

I have skipped it in certain places, and I just alert my visitors that certain things might not function because they are using an outdated browser. I'm not telling you to just a suggestion.

This JavaScript might better server your purpose, I'm not sure what your using now.

This goes in the head area:

<script type="text/javascript">
var prevColor;

function changeColor(id,color) {
if (color==='prev') {
id.style.background = window.prevColor;
}
else {
window.prevColor = id.style.background;
id.style.background = color;
}
}
</script>

Then add this to the TR you wanna change, the last part just reverts it back to whatever color it was when you hovered. That way the tables can have a color and the script will restore it instead of just setting it white or something.

onmouseover="changeColor(this,'red');" onmouseout="changeColor(this,'prev');"

Change the red to your color and add that to as many TRs as you like. Hope that helps.

Tim