IE6 导航悬停

IE6 Navigation hovers

提问人：Ross 提问时间：12/1/2008 更新时间：12/5/2008 访问量：1713

问：

我使用以下代码来进行非 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 中悬停时更改图像。我正在锚点上使用，所以这应该没问题并且正在使用，而不是这是在 IE6 中不起作用的另一件事。:hoverdisplayvisibility

我真的不想为图像替换/预加载添加大量 javascript（嵌入像 jQuery 这样的东西不是一种选择）——任何人都可以在这里帮助我吗？

谢谢

CSS Internet-Explorer-6 导航 悬停

评论

0赞 strager 12/1/2008
注意：您错过了收盘</a>。

答：

4赞 Kornel 12/1/2008 #1

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

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

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

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

评论

0赞 Adam Plumb 4/1/2009
耶！这帮助我解决了从jQuery替换图像src的问题。$（“#image”）.attr（“src”， “newsrc.jpg”）.css（“边框”， “0”）;导致 IE6 刷新映像并显示新的 src！
1赞 Jason 12/1/2008 #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");
}

评论

0赞 strager 12/1/2008
OP 希望在用户将鼠标悬停在项目上之前缓存图像。也许他可以在 HTML 文件的末尾添加一些 <img> 标签，并显示：none;？
2赞 Wayne Austin 12/5/2008 #3

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

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

然后你可以摆脱你的img标签及其样式（display：none等）

并设置链接样式：

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

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

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

希望这有帮助！

上一个：CSS：固定布局还是浮动布局？[关闭]

下一个：在运行时更改嵌套页面的样式表