IE6导航悬停

除非有规定,否则不重新油漆锚 <a> 自身改变。为添加任何内容 a:hover ,例如:

 #navigation a:hover {border:0} /* no-op */

顺便说一句:不幸的是,受欢迎的屏幕阅读器不会用 display:none ,所以您的菜单最终无法访问。

我建议 <img> 默认可见,悬停时隐藏。

我同意Jason在这里所说的,但是如果您希望在用户悬停在链接上之前缓存这两个图像,那么为什么要使用两个图像?

不久前我想出了一个小主意,我喜欢使用,它有两个按钮的正常和悬停状态作为同一个图像,按钮的正常状态在顶部和按钮的悬停状态下,这意味着按钮的两个状态都是直接缓存,作为它的同一个图像!而且,在你的按钮的不同状态下,你不需要加载不同的图像来填充你的图像文件夹,只有一个图像引用了链接的每个状态。

然后你可以摆脱你的img标签和它的样式(显示:无等)

链接样式如下:

#home a {    
    background: url('./images/nav/home-normal.png') no-repeat left top;    
    width: 100px;
}
#home a:hover {    
    background-position:left bottom;
}

你还必须在链接上加一个高度,这样它就不会显示链接的其他状态的任何部分,有意义吗?您可以有效地将背景图像与元素尺寸样式切成两半。

不需要javascript,并且状态更改是即时的,因为图像已加载:)

希望这有帮助!

您也可以使用锚定标签上的背景作为图像保持器。

HTML:

<ol>
 <li><a href="#"></a></li>
</ol>

CSS:

li a{
 background:url("link.jpg");
 display:block;
 width:100px;
 height:50px;
} 

li a:hover{
 background:url("link2.jpg");
}