1

我正在使用以下代码进行非 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 之类的东西） - 有人可以帮我吗？

谢谢，

4

3 回答 3

4

IE 不会重新绘制锚点，除非其<a>自身的任何规则发生变化。添加任何内容a:hover，例如：

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

顺便说一句：不幸的是，流行的屏幕阅读器不使用 阅读内容display:none，因此您的菜单最终无法访问。

我建议<img>默认情况下可见，并在悬停时将其隐藏。

于 2008-11-30T22:52:42.873 回答
2

我同意 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 并且状态更改是即时的，因为图像已经加载:)

希望这可以帮助！

于 2008-12-04T16:37:19.587 回答
1

您还可以使用锚标签上的背景作为您的图像持有者。

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");
}
于 2008-12-01T03:50:11.103 回答