The IE6 :hover workaround

Kids, I've found the best and ultimate workaround solution for the hover problem of IE6. Unfortunately my discovery is a little overdue, because this hackers-heaven product, IE6 gets outdated, so consider this announcement an archaeologist's curiosity. Let's get to the point.

:hover pseudo selectors only work on links in IE6. You have to make it work on non-link elements, too. What you do? Your first thought is IE's magic equipment, Mr. Expression. You'll be trying, but won't succeed. But project deadline is coming, so you go to your template and hardcode onmouseovers and onmouseouts in your tag soup. Oh no, you say. Oh no. You cry. Later on you periodically review your code, and your eyes always stop on these onmouseovers and onmouseouts, and you always cry.

Ok, seriously, expression works. As it is shown here. He takes a random css property and gives the javascript onmouseover assignment as a value to it. There's two problems with it. First, it makes the behaviour totally sluggish because the assigment is interpreted i-don't-know-how-many times in every second. And it continuously creates new functions, and it's beeing garbage collected etc. Second, no need to play with the classnames.

Simply put:

a.dropdown-item {
  _m: expression(onmouseover = onmouseover || new Function("$(this).down().style.display = 'block'") : '');
  _n: expression(onmouseout = onmouseout || new Function("$(this).down().style.display = 'none'") : '');
}

You see? We check if the assigment has already done and hence it will be blazing fast. That's the big idea.

Essentially that's all that I wanted to share with you, my precious fellows. Two more notes: String assigment to the onmouseover and onmouseout properties won't work. You have to create functions explicitely. Lastly, no need for "this." prefix, however this is the nice way, but remember, in hacks there's no nice way.

UPDATE

Fine, an even more beautiful snippet is here.