IE6 导航悬停

Posted 2023-03-05

【中文标题】IE6 导航悬停

【英文标题】：IE6 Navigation hovers

【发布时间】：2010-09-24 16:15:39

【问题描述】：

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

<ol id="navigation">
    <li id="home"><a href="#"><img src="./images/nav/home-hover.png"  /></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 之类的东西） - 有人可以帮我吗？

谢谢，

【问题讨论】：

注意：你错过了结束。

【参考方案1】：

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

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

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

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

【讨论】：

耶！这帮助我解决了从 jQuery 替换图像的 src 的问题。 $("#image").attr("src", "newsrc.jpg").css("border", "0");导致 IE6 刷新图像并显示新的 src！

【参考方案2】：

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

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

【讨论】：

OP 希望在用户将鼠标悬停在项目上之前缓存图像。也许他可以在 HTML 文件的末尾添加一些 标记，带有 display: none;?

【参考方案3】：

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

希望这会有所帮助！