When you know a day is going to hurt

This code hurts:

<div class="leftNavLink" id="leftLink3"><a class="main" 
   onmouseover="document.getElementById('leftLink3').className='leftNavLinkSelected'"
   onmouseout="document.getElementById('leftLink3').className='leftNavLink'" href="http://www.example.com/">Link Location</a></div>

Because :hover just isn't supported well enough.

Published February 16, 2006 · Updated September 14, 2006
Categorized as Other
Short URL: https://snook.ca/s/529

Conversation

15 Comments · RSS feed
Adam Thody said on February 16, 2006

Why not assign the event handlers with DOM instead?

Jonathan Snook said on February 16, 2006

:D I was being sarcastic on the :hover comment. I'm not even sure why they are doing this with a rollover. CSS could handle this more quickly and easily.

Richard@Home said on February 16, 2006

"I'm not even sure why they are doing this with a rollover. CSS could handle this more quickly and easily."

... because the hover trigger is the 'a' tag, but the hover target is the 'div', and AFAIK you can't do this in CSS alone.

Course, they could probably have got the same effect with a display: block on the 'a' tag but its hard to tell from the snippet.

I agree with Adam too.

Chris R. said on February 16, 2006

I too agree with Adam, the code like it's quoted above is a little too obtrusive to be good imo, applying it with the DOM would degrade better too.

Were you actually using it yourself or have you found it somewhere while redesigning?

Jesse Skinner said on February 16, 2006

I agree with Richard, this could probably be replaced with a single 'a' tag with display:block.

It's kinda funny to see CSS and getElementById though.. usually when you see code this bad it uses Dreamweaver's MM_* functions, inline images, and not a class in sight.

Jonathan Snook said on February 16, 2006

To give a little more context, the script changed an image and the link underline. Which could have been done by setting the link to block. This was a piece of code that I had seen on a project I had worked on. If it was a little more complex I could see the javascript still being necessary, in which case, unobtrusive would have made this easier to work with.

Krzychu Danek said on February 16, 2006

It is a great example of what developer has to go through to emulate a simple effect because of lacking :hover support in IE (:first-child is my second favourite) .

Sure it can be done better by rewriting CSS (not always possible) or handling it with external scripts (although using DOM for presentation is not a good thing as well), but that's just not the point.

Let's just hope that Microsoft will make it right in final release of IE7...

Chris said on February 16, 2006

Ouch, that does hurt. But I agree with all the knowledgable people who practice the block-level 'a' element technique. That's saved my bacon on more than one occasion.

Robert Nyman said on February 17, 2006

Jon, that's nothing! :-)

Code like this hurts:


if (navigator.appName == 'Netscape') {
document.write...

WD Milner said on February 18, 2006

All that work and they leave out title="Example Link Location"

:-)

Filip said on February 22, 2006

:hover is very well supported. Just needs a little bit of "special care" and 3 seconds worth of paying attention :

<style>
.main {
font-size : 12px;
font-family : Tahoma;
text-decoration : none;
padding-left: 10px; }

.main text {
color : #000000;
background : #348348;
padding-left: 10px;
padding-right: 10px; }

.main text:hover {
color : #348348;
background : #000000;
padding-left: 10px;
padding-right: 10px; }
</style>

<div>

<text>Link Location</text>
</div>

Jesse Skinner said on February 22, 2006

@Filip: 2 things:

1. there is no text tag
2. this doesn't work in IE, IE only allows hover on A tags (only with hrefs, and with a pre-defined A rule at that!)

(Note to others: Filip's HTML here has been filtered, but in the e-mail notifications looked like:)

<div>
<a class="main" href="http://www.example.com/">
<text>Link Location</text></a></div>

Luiz Jr. said on February 22, 2006

Isn't it because IE?, in IE the :hover event don't can be used for div elements....

Richard white said on February 23, 2006

Yeah what Luiz Jr. said, this is obviously done for IE, unless of course you want every hoverable thing on your site/application to be an anchor.

Luiz Jr. said on July 30, 2006

And what do you say for me about csshover.htc and csshover2.htc ? It's a good method to try to do with the brownsers that do not have the trully implementation of CSS2, like the hover, active and focus methods, understanded this good functionality

Sorry, comments are closed for this post. If you have any further questions or comments, feel free to send them to me directly.

Want to learn about scaling CSS for large projects?

I'm available for full and half-day workshops on scalable CSS architecture. I can provide on-site training for your team. Interested?
Get in touch.