Forum Moderators: not2easy
The code's intentions: User hovers over a link and a box appears, hovering above the link, with a short description.
IE6 bug: The box correctly hovers above the intended link, but other links show through the box. Only links with the class applied show through, not "regular" links. I highly suspect that the culprit is the
position: relaviteon
a.hoverLink, but this rule is required to properly align the box once it becomes visible.
Small note: The
border-color: redis in there as another IE6 fix. IE6 will not redrawn the hover box on
a:hoverunless a significantly "important" attribute changes.
border-colorfills that role.
I hope you guys can help me out.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
a.hoverLink {
position: relative;
}
a.hoverLink div {
z-index: 1;
position: absolute;
left: -10000px;
top: 5px;
width: 200px;
border: 2px solid #333;
background-color: #DDD;
color: #333;
text-decoration: none;
}
a.hoverLink:hover div {
left: 10px;
}
a:hover { /* IE Fix */
border-color: red;
}
</style>
</head><body>
<div>
<a href="#" class="hoverLink">
Hover Link
<div>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Proin imperdiet metus sit amet massa.</p>
</div>
</a>
</div>
<div>
<a href="#" class="hoverLink">
Hover Link
<div>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Proin imperdiet metus sit amet massa.</p>
</div>
</a>
</div>
<div>
<a href="#" class="hoverLink">
Hover Link
<div>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Proin imperdiet metus sit amet massa.</p>
</div>
</a>
</div>
<a href="#">Regular Link</a>
</body>
</html>
a.hoverLink should have z-index:1; whilst the div should have z-index:2 or greater
As for your general approach, I suggest that instead of moving the DIV on and off the screen, you switch the visibility: or the display: for a more consistent response.
display
I am currently moving the div off-screen as a work-around for the case where the "pop-in" would normally fall off the bottom. When
left: -10000px, the window provides vertical scroll space for the div. In my final code, I've also got a special case for those "pop-ins" that fall off the right side of the screen.
