Grow your CSS skills. Land your dream job.

display: none trouble in IE6

  • # October 7, 2008 at 12:31 pm

    I have a page with a few list items. Next to each list item is a question mark icon that, when moused over, displays a tooltip in a box over the page content. The code is set up like this:

    HTML:

    Code:
  • List item 1 Tooltip
  • List item 2 Tooltip
  • List item 3 Tooltip

CSS:

Code:
a.tooltip span {
display: none;
}
a.tooltip:hover span {
display: block;
/* more properties – fonts, colors, etc. */
}

Here’s the problem. In IE6, the <a> expands to the entire area that the <span> occupies (even when it’s not visible), rather than just the little question mark icon. So, moving the mouse over any part of the area that the tooltip occupies (when visible) causes it to display anyway. I want it to only be triggered when you mouse over the question mark icon.

"Display: none" should fully remove the <span> from the page, right? I’m not using visibility (which would hide the element from view but keep it on the page), I’m using display. Once I move the mouse out, the tooltip should be removed from the document, correct?

In Firefox, it works as expected – the <span> only appears when you mouse over the question mark icon directly.

Any ideas?

# October 7, 2008 at 3:07 pm

What you really want is to put that hover event on the img itself rather than the anchor… but IE 6 doesn’t support hover events on anything but anchors. You could use jQuery…

Code:
$(“a.tooltip img”).hover(function(){
$(this).parent().find(“span”).show();
}, function () {
$(this).parent().find(“span”).hide();
};
# October 7, 2008 at 3:17 pm
Quote:
What you really want is to put that hover event on the img itself rather than the anchor… but IE 6 doesn’t support hover events on anything but anchors.

Exactly. That’s the real way to do it, but it won’t work in IE without some trickery. We’re trying to do it with just CSS so that’s why I did it this way.

What’s weird is that we actually have it working on another page, in IE. Same CSS and everything, just different content. We’re trying to figure out why it works okay on the one page and not the other…:lol:

Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".