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添加任何内容，例如：

 #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＆amp;当图像已经加载时，状态变化是即时的：）

希望这有帮助！

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

IE6导航盘旋

3 个答案: