当使用位置为：absolute的li时，IE8不会悬停 [英] IE8 does not hover when using an li with position:absolute
问题描述
我有一个图像映射，我在这里使用li来创建元素，并悬停在信息弹出。 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> </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纯红色;在李，跨度确实显示，但只有如果我的鼠标正好在1px薄边框。如果光标位于 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 events，您需要使用此元素： 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.
这篇关于当使用位置为：absolute的li时，IE8不会悬停的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
