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.
Conversation
Why not assign the event handlers with DOM instead?
:D I was being sarcastic on the
:hovercomment. 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.
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.
It is a great example of what developer has to go through to emulate a simple effect because of lacking
:hoversupport in IE (:first-childis 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...
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.
Jon, that's nothing! :-)
Code like this hurts:
if (navigator.appName == 'Netscape') {
document.write...
All that work and they leave out title="Example Link Location"
:-)
: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>
@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>
Isn't it because IE?, in IE the :hover event don't can be used for div elements....
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.
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