我有一种图像地图,我在其中使用 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 不会在悬停时显示跨度。但是,如果我放置边框:1pxsolid red;在 li 上,跨度确实会显示,但前提是我的鼠标正好位于 1px 的细边框上。如果光标仍然不显示inside the li.
我在这里做错了什么? :(
谢谢您的帮助。
Internet Explorer 在处理 :hover 事件时存在一些问题,尤其是对于 li 元素。你需要使用这个:http://www.xs4all.nl/~peterned/csshover.html
那么应该为你工作。
如果所有其他方法都失败了,就我而言,我使用 jQuery 的悬停意图来可靠地显示菜单。
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)