Javascript 赢得图像'；在Internet Explorer中不显示为链接

我正在设计一个结合CSS和JavaScript效果的菜单栏。它由大图标组成，当鼠标悬停在上面时，下面会显示文本。它将部署在内部网上，因此只需在IE7、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;
}

...

函数vtoggle（x）{
if（document.getElementById（x.style.visibility=='hidden'）{
document.getElementById（x）.style.visibility='visible'；
}否则{
document.getElementById（x）.style.visibility='hidden'；
}
}
#航行{
保证金：0px自动；
填充：0px；
左侧填充：10px；
高度：64px；
列表样式：无；
}
#导航李{
浮动：左；
明确：无；
列表样式：无；
}
#导航李a，#导航李a:链接{
颜色：#fff；
显示：块；
字体大小：12px；
文字装饰：无；
填充：8px 18px；
边际：0px；
左边距：-20px；
宽度：80px；
高度：64px；
背景：url（../images/transparent.gif）；
}
#导航李a：悬停{
背景：url（../images/glow.png）；
背景重复：无重复；
背景位置：10px-2px；
}
.图标{
浮动：左；
宽度：100%；
文本对齐：居中；
}
.icontxt{
浮动：左；
字体大小：10px；
颜色：白色；
字体大小：粗体；
清除：左；
文本对齐：居中；
宽度：100%；
页边顶部：-1px；
}

非常感谢您的帮助

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

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

---

如果您所担心的只是光标，而链接本身可以工作，那么您可以使用CSS添加它：

cursor: hand;

---

希望这有帮助

如果您所担心的只是光标，而链接本身也可以工作，那么您可以使用CSS添加它：

cursor: hand;

---

希望这有帮助

我解决了这个问题。我必须删除图标周围的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移到link标记中以保留格式。现在它工作正常，但我仍然不明白为什么SPAN标记会禁用链接。

我解决了这个问题。我必须删除图标周围的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移到link标记中以保留格式。现在它工作正常，但我仍然不明白为什么SPAN标记会禁用链接。

确保SPAN未设置为阻止。同样的事情也发生在我身上。

确保您的量程未设置为阻塞。同样的事情也发生在我身上。

不，这些链接实际上不起作用。这会让用户感到困惑，因为他们会在手不点击的地方显示手！IE从版本6开始就支持“指针”值（而不是非标准的“指针”）。现在没有理由使用hand。不，链接实际上不起作用。这会让用户感到困惑，因为他们会在手不点击的地方显示手！IE从版本6开始就支持“指针”值（而不是非标准的“指针”）。现在没有理由使用手。也许IE不认为跨距样式是它里面的任何一部分。也许这可以防止你可能遇到的其他问题，将样式组合成样式——也许不是。也许IE不认为跨度样式是它内部的任何一部分。也许这可以避免您可能遇到的其他问题，将样式组合到样式中--也许不是。