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并没有显示悬停的跨度。但是，如果我放一个边框：1px纯红色;在li上，跨度确实显示出来，但前提是我的鼠标正好在1px的薄边框上。如果光标在里面 li。

，则不会显示

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

Answer 1

Internet Explorer在处理时遇到一些问题：悬停事件，尤其是li元素。您需要使用此：http://www.xs4all.nl/~peterned/csshover.html

那么应该适合你。如果所有其他方法都失败了，在我的情况下，我使用jQuery的hoverIntent来可靠地显示菜单。

Answer 2

来自http://msdn.microsoft.com/en-us/library/ms530766.aspx

Windows Internet Explorer 7及更高版本，在符合标准的模式（严格！DOCTYPE）中，可以将：hover伪类应用于任何元素，而不仅仅是链接。如果伪类未专门应用于选择器中的元素（例如A标记），则假定使用通用（*）选择器。不加选择地使用：hover伪类会对页面性能产生负面影响。

请参阅Defining Document Compatibility

当使用位置为绝对的li时，IE8不会悬停

2 个答案: