使用带有position:absolute的li时，IE8不会悬停
我有一种图像地图，我在其中使用 li 来创建元素，并将鼠标悬停在弹出的信息上。 html 代码是：
<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 代码是：
#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 Solid red;在 li 上，跨度确实会显示，但前提是我的鼠标正好位于 1px 的细边框上。如果光标位于 li 内，则仍然不会显示。
我在这里做错了什么？ :( 感谢您的帮助。
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>
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;
}
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.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
Internet Explorer 在处理 :hover 事件时存在一些问题，尤其是对于 li 元素。您需要使用：http://www.xs4all.nl/~peterned/csshover。 html
应该适合你。
如果所有其他方法都失败了，就我而言，我使用 jQuery 的悬停意图来可靠地显示菜单。
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
Should work for you then.
If all else fails, and in my case, I use jQuery's hoverIntent to show menus reliably.
来自 http://msdn.microsoft.com/en-us/library/ms530766 .aspx
请参阅定义文档兼容性
From http://msdn.microsoft.com/en-us/library/ms530766.aspx
See Defining Document Compatibility