:hover styling not working

[palswim]

i'm trying to make the "dd" elements on my page act like links, so i've styled them like this:
dd{
cursor: hand;
voice-family: "\"}\"";
voice-family: inherit;
cursor: pointer;
}
dd:hover{
text-decoration: underline;
}

the regular "dd" styling works fine (making the cursor change to a hand when passing over the element), but the "dd:hover" styling doesn't work at all.
any suggestions or solutions?

[Stefan]

Originally posted by palswim
any suggestions or solutions?

Which browsers did you test with?

IE has problems with :hover on anything but basic things like a.

Gecko and opera browsers however are a bit more capable.

Thus you could always add an IE specific JS triggered by onmouseover.

[palswim]

Originally posted by Stefan
Which browsers did you test with?

IE has problems with :hover on anything but basic things like a.

Gecko and opera browsers however are a bit more capable.

Thus you could always add an IE specific JS triggered by onmouseover.
Yeah, I did test with IE only, I guess. I thought I'd tested with Mozilla, but I guess not, because I just tested the site with Mozilla and it works as I'd expected.
The reason I didn't want to use mouseovers is because I didn't feel like programming anymore JS today and I love minimizing the size of my files. I'm just wierd like that.
Thanks for the help.

[Rick Bull]

How about for IE something like this:


<script type="text/javascript"><!--
if (document.getElementsByTagName && document.all) {
var elements = document.getElementsByTagName('dd');
for (var loopCounter = 0; loopCounter < elements.length; loopCounter++) {
elements[loopCounter].onmouseover = new Function("this.style.textDecoration = 'underline';");
elements[loopCounter].onmouseout = new Function("this.style.textDecoration = 'none';");
}
}
//--></script>


I haven't tested it but something like that should work - all you have to do is put it at the bottom of the page (or call it as a function on page load) and it should find all <DD> in the page and add a mouseover/out to it. You probably know already but I put in "&& document.all" so that it should only run on IE.

[Stefan]

Originally posted by Rick Bull
You probably know already but I put in "&& document.all" so that it should only run on IE. [/B]

Um, doesn't that include also Opera?
I think it implements the IE proprietary DOM to remain "compatible with the net".

OTOH Opera before 7 is not very good with :hover also, so it might be a good thing to have it that way.

[Rick Bull]

Yep I think you're right about Opera, But that's OK, as long as it works for IE, at least it won't waste that 100th of a second for loops on Mozilla :D

[SKIP3879]

perhaps the browser expects a 'visited' style before-hand.

(as with a:link {... a:visited {.... a:hover {....)

[Rick Bull]

Nope I'm pretty sure it's not that - IE just doesn't like hover on pretty much anything but links.