Because :hover just isn't supported well enough.
Why not assign the event handlers with DOM instead?
: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.
"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.
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?
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.
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.
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.
All that work and they leave out title="Example Link Location"
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.