NOTE: This post has been updated on Thursday, February 7th, 2008
Look at the end of the post for CSS only solution

Most modern browser allow various hover effects. One of the most widely used way is using hover effect on almost all elements. IE6 and bellow do not offer that functionality - though there is a hack (take a look at the Whatever:hover).

However, in the previous blog post I showed how to create a TYPO3 menu containing various images and text, laid out using DIVs. The resulting code looks like this:

<a href="index.php?id=3">
  <div class="teaser">
    <div class="teaser_left_content">
      <div class="teaser_label">
        <img src="typo3temp/menu/da75c355a0.png" 
             width="82" height="17" alt="Page 3" />
      </div>
      <div class="teaser_content">
        Page 3 description
      </div> 
    </div>
    <div class="teaser_right_content">
      <img src="/ltm/uploads/media/page3.gif" 
           width="140" height="84"/>
    </div>
  </div>
</a>

Example CSS with a hover effect would look something like this:

DIV.teaser 
{
  background-image: url(../images/teaser_back_no.gif);
  background-repeat: no-repeat;
  background-position: top;
}

A DIV.teaser 
{
  text-decoration: none;
}

A:hover DIV.teaser 
{
  background-image: url(../images/teaser_back_ro.gif);
  background-repeat: no-repeat;
  background-position: top;
}

A:hover DIV.teaser DIV.teaser_left_content DIV.teaser_content 
{
  text-decoration: underline;
}

This works perfectly in all modern browsers except for IE6 and bellow. If you move mouse over and out of the menu item, the hover effect will stay on(!) - like you never moved the mouse out. In some rare cases IE6 will recognize the mouse over event properly, but without any rule whatsoever.

Fix for the A:hover IE problem

I've used the Prototype JavaScript framework for the solution (BTW, I absolutely love it). The trick is to add an empty CSS class, observe for mouse out events using the Prototype library, and fire a small change on each event - just add the newly added class to the first element inside the A tag on mouse over event, and remove it on mouse out:

DIV.teaser_hover {
}

Essentially, there is no CSS change, the Prototype framework just helped with the proper mouse out event catching.

Finally, here's the JavaScript code:

function init_menu() {
  var items = document.getElementsByClassName('teaser');
  items.each(function(item) {
    Event.observe(item,'mouseover',function() {
      Element.addClassName(this,'teaser_hover');
    }.bind(item));
    Event.observe(item,'mouseout',function() {
      Element.removeClassName(this,'teaser_hover');
    }.bind(item));
    Event.observe(item,'click',function() {
      var link = this.getElementsByTagName('a')[0];
      if (link.getAttribute('rel') == 'external') {
        window.open(link.href);
      } else {
        window.location = link.href;
      }
    }.bind(item));
  });
}

Event.observe(window,'load',init_menu);

The flaw of both Whatever:hover and this solution is that they won't work if the scripting support is turned off in a client's browser. However, this should not be a big issue nowadays anyway.

UPDATE on Thursday, February 7th, 2008

I've just discovered that there's no need for JavaScript at all in order to fix IE5, IE5.5 and IE6 hover problem! Just add the following line at the top of your CSS:

a:hover {background-position: 0 0;}

Of course, the CSS-only fix is a recommended solution.

Cheers
Nikola

Related links:

• Whatever:hover
• Prototype JavaScript framework

Bookmark now:

5 Responses to “IE6 and bellow hover problem solved”

Comment from Guest

on Thursday, 17-04-08 02:14

This CSS is great! What the hell! But why? I like to know why it works...what kind of property is that background-position? I am curious

Comment from wynny

on Wednesday, 02-04-08 17:21

great! works fine for me! just a single line of css...
thank u so much!!

Comment from YuriGoul

on Wednesday, 02-04-08 12:18

@Rickibirder: Check your specificity, adding the code just made my day (after jumping through hoops on one other domain yesterday)

Comment from Nikola

on Thursday, 13-03-08 11:00

Do you have a valid CSS for the A:hover?

Yes, you should put a:hover {background-position: 0 0;} in the first line of CSS, but this just replaces (ugly) JavaScript code.

You still need HTML and CSS from this article. Also, make sure you actually have the background-images, or just use different background-color.

I've put a sample HTML page here.

I've switched div with span tag with display:block so this code passes W3C validation.

Comment from Rickibirder

on Thursday, 13-03-08 10:38

Are you saying that the only code required is the simple line of CSS at the top of the CSS file? Sounded too good to be true.

I tried this and it didn't do anything for IE6. Am I missing something?