Tables - highlight as hovering

[DeletedUser35]

[resolved]

[jwilliam]

CSS won't do this in IE because IE doesn't support the :hover pseudo-class on any elements but anchors. You can do it with Javascript, though:



function highlightRow(o)
{

var tds = o.getElementsByTagName('td');

for(var i=0; i<tds.length; i++) {
tds[i].style.background = "#d0dde6";
tds[i].style.border = "1px solid #687985";
}

}

function unlightRow(o)
{

var tds = o.getElementsByTagName('td');

for(var i=0; i<tds.length; i++) {
tds[i].style.background = "#f0f6fb";
tds[i].style.border = "1px solid #d0dde6";
}

}


And your html would look like this:



<table>
<tr onmouseover="highlightRow(this);" onmouseout="unlightRow(this);">
<td width="50%">
test
</td>
<td width="50%">
test
</td>
</tr>

</table>


I haven't tested the above code, but I use something similar on a couple different websites. Also, it's not good practice to put inline javascript in your html like I did above, but it's quicker for me to type. If you have any interest in separating your javascript from your html, let me know and I'll show you the proper way.

[redelite]

You can only use the :hover pseudo-class on anchor tags (<a>) thanks to Internet Explorer.

Are you trying to get the entire table row to highlight or just the cell the user hovers over? If your trying to get just the CELL and not the entire row, then all you have to do is add an anchor tag inside the table cell.



<table>
<tr>
<td width="50%">
<a href="#">test</a>
</td>
<td width="50%">
<a href="#">test</a>
</td>
</tr>
</table>
Then in your CSS, just declare the anchor as a block so it fills the entire CELL, and add your hover:



a:link,
a:visited {
display: block;
}

a:hover {
background: #f00; /* Change this to the color you want the cell to be */
}


Hope this helps you out a bit! :D

[redelite]

Can you post the code or a link so I can see what is going on? I'm not quite following you.

[DDD]

you may have to use a psuedo class. tr:hover. I think IE will have a issue with it tho.

[redelite]

Is this what your talking about? (JUST the CELL background.. not the entire ROW)..

HTML (borders are on to see the table)


<table border="1">
<tr>
<td><a href="#">test</a></td>
<td><a href="#">test</a></td>
</tr>
</table>
CSS


table {
width: 300px;
}

td {
width: 50%;
height: 100px;
}

a:link,
a:visited {
display: block;
height: 100px;
}

a:hover {
background: #ccc;
}

[DDD]

That what you have there can be and should be done without a table. But if you insist on using a table. Which looks like you want to use a td. Put this in your css.

td:hover{
background:#f0f0f0;
}

This can be done with 5 divs a bit easier. The easiest way is to make a wrapper div, give it a wwidth and height. Then float left (yea I said float) 4 divs with half the height and half the width, inside that wrapper. Be sure to set margins and padding to 0 on the 4 divs. If you need padding, besure to add those values to the width/height of the wrapper. There are other ways too but that is the easiest/fastest.

or

in your example give your TD a height. then make you <a> a block level element and give it the same height. That may be a better way to get your highlighting without changing much of your code. But again what you are doing is really not tabular data.

[redelite]

td:hover


IE can't do that.... which is why I said the anchor tag way is the only way if you don't want to use Javascript and still be friendly to all browsers.:?)



(yea I said float)

YAY!!! :D

[DDD]

This is tabular data (comparison chart)
http://quickbooks.intuit.com/product/accounting-software/small-business-accounting-software.jsp

Redelite....I didnt even notice you said the same thing I did. But for some IE isnt a issue so I threw the :hover out there.

[redelite]

Redelite : Yes, that is exactly what I wanted :D Only problem is, the code won't validate.

:huh: What doesn't validate? What's the error?