using css hover for non A (anchor) links

question about 'hover' psuedo-class

[starfliz]

ok first the code:

.test {background-color:blue}
.test:hover {background-color:green}
... later in the html....
<td class=test>some text</td>

very simple it seems. this works with firefox but not in IE (although I thought it was an IE only feature haha)

basically I would like something (in this case the TD element) to change color when I hover over it.. not just the anchor (all the examples ive seen use A:link or A.someclass:link)

any idea of a good way to make this work.. or what I am missing. thanks.

[bruhaha]

"Hover" won't work for anything but the anchor. But, if you don't mind using a little bit of javascript you can make this work.

First, label your styles:

.test {background-color:blue}
.testOver {background-color:green}

Then, for your HTML:

<td class="test" onmouseover="this.className='testOver'" onmouseout="this.className='test'">my text</td>

[starfliz]

cool thanks... I figured it would go to javascript.

learned a new way to do that though :)

oddly enough.. what I tried does work with firebird (.8).. strange.

[createErrorMsg]

IE supports the :hover pseudoclass on <a>nchors only. Other browsers provide more robust support.

For what it's worth, if this...

<td class=test>some text</td>

...is all you're trying to do, you could enclose the text in an <a>nchor linked to the top of the page - href="#" - styled with no underline, normal text color and no hover event and set to display:block. The effect would be text in a cell that changes the background on :hover. You can even style the cursor not to change to the clicky hand thing, if you want.

I'm not saying I endorse this sort of hackery, nor that I would use it myself, but it is an option...

cEM