How to Tame IE6 Hover Problem

Suppose you want to make a pop-up tool-tip with CSS and you get it all done, but your tool-tip won’t work in Internet Explorer because of the IE6 Hover Problem. You can solve this with Java Script, but it takes quite a bit of code, and it isn’t really necessary.  There is a way to make IE6 hover work just using CSS and one simple trick.

• Use Tool-tips ??

Maybe you want to provide an explanation or some other info when the user hovers the mouse over a word in your text like this. You can make a tool tip appear by putting your explanatory text in the ‘title’ field of an anchor.  The problem with that is that you can’t style it, and by default it disappears after 5 seconds.  Useless for long explanations because you don’t get time to read it before it vanishes.

• Pure CSS Pop-ups

You can have  nicely styled pop-upsYour beautifully styled Tool Tip pop-up window looks like this.You can add code to it (E.G., <p>), style it how you like, and generally stamp your imprint on it to reflect your site or your personality. that fit your theme and are cross browser compatible using just style statements – no Scripts!  Add the following code to your style sheet or style statements in the header:

/* Pop up styles  */

a.ref   {
position: relative;
}
a span   {
border: 1px solid #700;
padding: 4px;
visibility: hidden;
position: absolute;
top: 30px;
left: -20px;
color: #900;
background: #ffd;
width: 250px;
}
a:hover   {
background:inherit; /* Trigger for IE6  */
}
a:hover span, a:active span, a:visited:hover span    {
visibility: visible;
text-decoration: none;
}

• The Secret

Note this code: a:hover   { background:inherit;  } /* Trigger for IE6  */ Because IE6 will not action a hover call for anything other than the <a> anchor itself, you need to trigger the hover event by calling a straight hover action like this a:hover {something}, then it will read the rest of the hover code and action it.  In this case I have used a <span> to make the tool-tip hover, but you can apply this to  <img>; or whatever…..

• The Code:

The Page code looks like this:
<a href=”#” class=”ref”>anchor text here<span> Pop-up Text contained in the span statement</span></a>

Hover this to see it work anchor text herePop-up Text contained in the span statement and beat the IE6 Hover Problem once and for all.

• Tip:

If you are doing this in WordPress, use the ‘HTML’ tab, not the ‘Visual’ Tab for editing it, ’cause WP makes a right ‘Dog’s Breakfast’ of the embedded code if you save it in Visual.

Tags: hover, hover problem, ie6, IE6 Hover, pop-up, tool-tip

This entry was posted on Sunday, August 31st, 2008 at 5:06 pm and is filed under Dynamic Web Pages, Graphics, WordPress. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.