/    Sign up×
Community /Pin to ProfileBookmark

:hover styling not working

Copy linkTweet thisAlerts:
Jan 17.2003

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?

to post a comment
JavaScript

7 Comments(s) ↴

Copy linkTweet thisAlerts:
@StefanJan 17.2003 — [i]Originally posted by palswim [/i]

any suggestions or solutions? [/QUOTE]

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.
Copy linkTweet thisAlerts:
@palswimauthorJan 17.2003 — [i]Originally posted by Stefan [/i]

[B]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. [/B][/QUOTE]
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.
Copy linkTweet thisAlerts:
@Rick_BullJan 17.2003 — How about for IE something like this:

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


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.
Copy linkTweet thisAlerts:
@StefanJan 17.2003 — [i]Originally posted by Rick Bull [/i]

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

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.
Copy linkTweet thisAlerts:
@Rick_BullJan 17.2003 — 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 ?
Copy linkTweet thisAlerts:
@SKIP3879Jan 19.2003 — perhaps the browser expects a 'visited' style before-hand.

(as with a:link {... a:visited {.... a:hover {....)
Copy linkTweet thisAlerts:
@Rick_BullJan 20.2003 — Nope I'm pretty sure it's not that - IE just doesn't like hover on pretty much anything but links.
×

Success!

Help @palswim spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.18,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...