进行 CSS 翻转的首选方法是什么？答案

【问题标题】：What is the preferred way to do a CSS rollover?进行 CSS 翻转的首选方法是什么？
【发布时间】：2010-09-15 13:54:31
【问题描述】：

在 HTML 中设置翻转效果时，在 CSS 与 JavaScript 中进行设置是否有任何好处（或缺陷）？对于这两种方法，我应该注意哪些性能或代码可维护性问题？

【问题讨论】：

【解决方案1】：

CSS 非常适合翻转。它们基本上是使用:hover 伪选择器实现的。这是一个非常简单的实现：

a{
    background-image: url(non-hovered-state.png);
}
a:hover{
    background-image: url(hovered-state.png);
}

不过有几点需要注意：

IE6 仅支持 :hover 上的 <a> 标签
在 CSS 中指定但未在页面上使用的图像不会立即加载（这意味着滚动状态第一次出现可能需要一秒钟）

<a>-tags-only 限制通常没有问题，因为您往往希望翻转可点击。然而，后者是一个更多的问题。有一种称为CSS Sprites 的技术可以防止此问题，您可以找到用于制作no-preload rollovers 的技术示例。

其实很简单，核心原理就是你创建一个比元素大的图片，设置图片为背景图片，并使用background-position定位，这样就只有你想要的那部分可见了。这意味着要显示悬停状态，您只需要重新定位背景 - 根本不需要加载额外的文件。这是一个简单粗暴的例子（这个例子假设你有一个 20px 高的元素，以及一个包含悬停和非悬停状态的背景图像 - 一个在另一个之上（所以图像是 40px 高））：

a{
    background-image: url(rollover-sprites.png);
    background-position: 0 0; /* Added for clarity */
    height: 20px;
}
a:hover{
    background-position: 0 -20px; /* move the image up 20px to show the hovered state below */
}

请注意，使用这种“精灵”技术意味着您将无法在 IE6 中使用 alpha 透明 PNG（因为 IE6 必须正确渲染 alpha 透明 PNG 的唯一方法是使用不支持 @ 987654330@)

【讨论】：

您可以通过指定文档类型让:hover 伪类在IE6 中的任何元素上工作。
从技术上讲，我认为背景位置应该是0 -20px 才能正常工作，但由于background-repeat 没有设置为不重复，所以没关系。
@jdp：我不确定你是否正确，我的朋友。IE6 在标签上只有每个支持的 :hover （没有 hacks）。不过，我非常愿意被证明是不正确的。有一个例子吗？
@Wes P：你完全正确，在这两个方面。我会修改我的代码，谢谢。
AFAIK，标准规定 :hover 应该适用于所有元素，但仅适用于 IE6 中的锚点。

【解决方案2】：

如果浏览器碰巧禁用了 Javascript，它仍然可以在 CSS 中工作。

【讨论】：

【解决方案3】：

因为它是表示的一个方面，我会说它是基于更多标准的 CSS 来实现的。它过去是用 Javascript 完成的，只是因为我们不能用 CSS 来完成（旧的浏览器很烂，而且我认为 :hover 直到 CSS 2 才被添加）。

【讨论】：

【解决方案4】：

使用 CSS 实现翻转使用 :hover 伪类来定义目标元素悬停时的样式。这在许多浏览器中都很好用，但在 IE6 中却不行，它只适用于锚标记（即 a:hover）。我使用 CSS hover 来实现选项卡式导航栏，但必须使用 IE 行为才能使其在 IE6 中运行。

【讨论】：

【解决方案5】：

是的，最好的方法是css sprites。 IE6 中出现了一个恼人的问题，即每次悬停元素时浏览器都会发出请求。要解决这个问题，take a look here。

【讨论】：

【解决方案6】：

我会留在房子里的 CSS 方面，但我做的 Javascript 很少。

CSS 似乎比 Javascript 更容易跨浏览器标准化，尽管随着 Chrome V8 的出现和 Firefox 即将推出的新渲染工具的出现，这种情况可能会发生变化。

【讨论】：

【解决方案7】：

CSS中没有记住声明顺序的助记符吗？

【讨论】：