我有一个图像映射，我使用 li's 创建元素，悬停时会弹出信息.html代码为:

I have a sort of an image map, where I've used li's to create the elements, and on hovering the information pops up. The html code is:

<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代码是:

And the CSS code for the corresponding HTML is:

#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 不显示悬停时的跨度.但是，如果我放一个边框: 1px 纯红色；在 li 上，跨度确实出现了，但前提是我的鼠标恰好位于 1px 细边框上.如果光标在 inside li，则不会显示.

This works splendidly in all the browsers, but IE8 does not show the spans on hover. However, if I put a border: 1px solid red; on the li, the spans do show up, but only if my mouse is exactly on that 1px thin border. Doesn't show up still if the cursor is inside the li.

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

What am I doing wrong here? :( Thanks for the help.

推荐答案

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

Internet Explorer has some problems with dealing with :hover events, especially for li elements. You need to use this: http://www.xs4all.nl/~peterned/csshover.html

那么应该对你有用.如果一切都失败了，就我而言，我使用 jQuery 的 hoverIntent 来可靠地显示菜单.

Should work for you then. If all else fails, and in my case, I use jQuery's hoverIntent to show menus reliably.