Question

我正在设计一个菜单栏，将效果与CSS和JavaScript结合起来。它由包含文字的大图标组成，当悬停在其上时出现。它将部署在Intranet上，因此它只需要在IE 7,8和Firefox中运行。 Firefox当然似乎执行我直觉上认为HTML应该是什么样子，显示带有大点击区域的大型块链接。但是，IE7显示的块链接充当Javascript的链接并正确悬停（在我通过添加透明背景图像来攻击它之后），但是当我点击它时不提供手指光标或跟随href。

有趣的是，图像周围的链接区域有手指光标，但只要我将图像悬停在箭头上，就会转回箭头。

<div id="navigation">           
<ul>
<li><a href="#" onMouseOver="vtoggle('txtHome');" onMouseOut="vtoggle('txtHome');">
<span class="icon"><img src="iconImage.png" alt="Home" /></span>
<span class="icontxt" id="txtHome" style="visibility:hidden;">Home</span>
</a></li>
...
</ul>
</div>

<script type="text/javascript">
function vtoggle(x) {
    if (document.getElementById(x).style.visibility == 'hidden') {
        document.getElementById(x).style.visibility = 'visible';
    } else {
        document.getElementById(x).style.visibility = 'hidden';
    }
}
</script>


#navigation{
margin:0px auto;
padding:0px;
padding-left:10px;
height:64px;
list-style:none;
}
#navigation li{
float:left;
clear:none;
list-style:none;
}
#navigation li a, #navigation li a:link{
color:#fff;
display:block;
font-size:12px;
text-decoration:none;
padding:8px 18px;
margin:0px;
margin-left:-20px;
width:80px;
height:64px;
background:url(../images/transparent.gif);
}
#navigation li a:hover{
background:url(../images/glow.png);
background-repeat:no-repeat;
background-position:10px -2px;
}
.icon{
float:left;
width:100%;
text-align:center;
}
.icontxt{
float:left;
font-size:10px;
color:white;
font-weight:bold;
clear:left;
text-align:center;
width:100%;
margin-top:-1px;
}

非常感谢任何帮助。

- 编辑 - 我解决了我的问题（我会发布下面的答案以符合惯例）但我仍然想听听为什么IE不允许

<a href="#"><span><img /></span></a>

Answer 1

我解决了这个问题。我不得不删除图标周围的SPAN标记。

这是我的新HTML代码：

<li><a href="#" onMouseOver="vtoggle('txtHome');" onMouseOut="vtoggle('txtHome');">
<img src="images/webapp48/profile.png" alt="Home" />
<span class="icontxt" id="txtHome" style="visibility:hidden;">Home</span>
</a></li>

我将span标记中的一些CSS移动到链接标记中以保留格式。现在它正常工作，但我仍然感到困惑，为什么SPAN标签会禁用链接。

Answer 2

确保您的SPAN未设置为BLOCK。同样的事发生在我身上。

Answer 3

如果您只担心光标，并且链接本身有效，您可以使用CSS添加它：

cursor: hand;

希望这有帮助！

图像不会在Internet Explorer中显示为链接

3 个答案: