html - 使用位置为 :absolute 的 li 时，IE8 不会悬停

Question

我有一种图像映射，我在其中使用 li 创建元素，悬停时会弹出信息。 html代码是:

<li id="b906" style="z-index: 1000;">
    <a href="#">
        <span>&nbsp;</span>
        <span class="para">Some text and maybe an image goes here.</span>
    </a>
</li>

对应HTML的CSS代码为:

#map ul li {
position: absolute;
list-style: none;
top: 0;
left: 0;
width: 100px;
height: 100px;
text-align: center;
display: block;
}

#map ul li a {
color: #000;
text-decoration: none;
color: #fff;
display: none;
position: absolute;
top: 0;
left: 0;
}

#map ul li:hover a {
display: block;
}

#map ul li a span {
display: block;
width: 100%;
height: 120px;
border: 2px solid #777;
}

#map ul li a span.para {
display: block;
background: #777;
padding: 2px;
-moz-border-radius: 5px;
border-radius: 5px;
width: 100px;
}

这在所有浏览器中都能很好地工作，但 IE8 不会在悬停时显示跨度。但是，如果我放一个 border: 1px solid red;在 li 上，跨度会显示出来，但前提是我的鼠标恰好位于 1px 的细边框上。如果光标在 li 的内部，则不会显示。

我在这里做错了什么？ :(感谢您的帮助。

Answer 1

Internet Explorer 在处理 :hover 事件时存在一些问题，尤其是对于 li 元素。你需要使用这个:http://www.xs4all.nl/~peterned/csshover.html

那么应该适合你。如果一切都失败了，在我的例子中，我使用 jQuery 的 hoverIntent 来可靠地显示菜单。