IE6 导航悬停

Question

我使用以下代码进行非 JS 导航：

<ol id="navigation">
    <li id="home"><a href="#"><img src="./images/nav/home-hover.png" alt="Home" /></li>
    ...
</ol>

还有CSS：

#navigation a {
    display: block;
    height: 25px;
}

#navigation a img {
    display: none;
}

#navigation a:hover img {
    display: block;
}

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

我的问题是他们不会在 IE6 中悬停时更改图像。我正在使用 :hover 在锚上，这样应该没问题，我正在使用 display 而不是 visibility 这是 IE6 中不起作用的另一件事。

我真的不想添加大量的 javascript 来替换/预加载图像（嵌入 jQuery 之类的东西不是一个选项） - 有人可以在这里帮助我吗？

谢谢，

Answer 1

除非<a>任何规则本身的变化

IE不重绘锚。对于a:hover，e.g添加任何东西。

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

BTW：不幸的是流行的屏幕阅读器不读与display:none事情，所以你的菜单最终是不可访问

我建议具有<img>默认可见和隐藏它悬停。

Answer 2

我同意杰森在这里所说的，但是如果您希望在用户将鼠标悬停在链接上之前缓存两个图像，那么为什么要使用两个图像呢？

不久前我想出了一个我喜欢使用的小想法，即将按钮的正常状态和悬停状态作为同一张图像，顶部按钮的正常状态和下面按钮的悬停状态，这意味着按钮的两种状态都会立即缓存，因为它是相同的图像！而且您没有为按钮的不同状态加载大量不同的图像来填充您的图像文件夹，只有一张图像引用该链接的每个状态。

然后你可以摆脱你的 img 标签及其样式（显示：无等）

链接样式如下：

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

您还必须在链接上设置高度，这样它就不会显示链接其他状态的任何部分，有意义吗？您可以使用元素尺寸样式有效地将背景图像切成两半。

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

希望这可以帮助！

Answer 3

您还可以使用锚标记上的背景是你的形象持有人。

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");
}