当我可以使用 CSS 时，为什么要使用 JS 进行图像翻转？答案

【问题标题】：Why use JS for Image Rollovers When I can use CSS?当我可以使用 CSS 时，为什么要使用 JS 进行图像翻转？
【发布时间】：2010-12-14 21:29:00
【问题描述】：

我正在阅读 Lynda.com 的 JS 教程，他们有一整章关于按钮的图像滚动条。当我可以使用 CSS 来创建图像滚动条时，为什么还要使用 JS？

【问题讨论】：

可能是因为那个教程太老了。
javascript 提供了一种在 CSS 存在和/或被广泛采用之前实现图像翻转的方法（我们说的是大约 1998 年）。现在，你应该总是使用 CSS 来做这类事情——我想不出一个支持 Javascript 的理由。
我可以找到一个 - 跨浏览器兼容性。
@easwee - 跨浏览器兼容性？除非您谈论的是 IE 5 或更低版本，否则这不是租赁意义上的问题。 IE 5 或更少的用户数量非常少。如果您认为应该使用 javascript 翻转来实现跨浏览器兼容性，那么您几乎是在声称 CSS 完全没用！
@easwee 我同意@Di-0xide。当存在“跨浏览器”JS 替代方案时，您实际上是在反对使用 any CSS。

标签： javascript css

【解决方案1】：

既然可以使用 CSS 来创建图像滚动条，为什么还要使用 JS？

你不应该，听起来教程可能只是用它作为例子来教你 JS。当使用 CSS 可以实现相同的结果时，您不应该选择 JS 而不是 CSS。

【讨论】：

太棒了。 . .至少我的直觉是对的。 . .我认为这是在这里做很多工作的方式，当我可以使用伪类时:-)
注意 - 并非所有伪类都适用于每个浏览器 - js 可以。
@easwee - 没错，但是对于 CSS 翻转，你真正需要的只是悬停伪类，它从 CSS1 开始就受到支持，因此几乎所有支持 CSS 的浏览器。
@easwee 这就是为什么我说什么时候可以实现相同的结果。此外，JS 并不适用于所有浏览器，虽然许多人在浏览时明确关闭了 JS 或通过 NoScript 之类的方式进行浏览，但我认为 任何人 都不会在关闭 CSS 的情况下浏览。
IE6 支持 :hover 仅在 - 在工作中我们仍然必须支持它，所以如果我需要在 div 上翻转，我必须使用 js。如果您不关心旧浏览器，显然只使用 css。不开启js浏览的用户数量不到1%——也不是说不行——他们选择关掉（也可以关掉css）。但不要误会我的意思——如果可以用 css 完成——用 css 来完成。

【解决方案2】：

在撰写这些文章时，:hover 伪类不存在和/或并非所有浏览器都支持。因此，javascript是实现翻转效果的首选方法。

现在 CSS :hover 伪类已经存在并且在所有主流浏览器中都被支持；因此，首选 CSS 方法。

【讨论】：

【解决方案3】：

有时您想在滚动时更改 content 图像而不是背景图像（并将内容图像的两个版本并排放置，然后使用 :hover 隐藏和显示它们会放置一个踏入“没有表示层的内容没有意义”的领域）

【讨论】：

Dorward - 有趣的理论。虽然这可能不是这些特定教程背后的原因，但这绝对是值得考虑的事情。当然，这将基于每个项目；由设计师决定哪种方法最适合网站——内容感知或视觉感知。

【解决方案4】：

我能想到的唯一原因（除了已经提到的）是在非锚元素上使用 :hover 伪选择器，当使用严格的文档类型时会导致 IE7 和 IE8 中的性能问题。

参考：http://code.google.com/speed/page-speed/docs/rendering.html#UseEfficientCSSSelectors

但在我看来，这仍然不是使用 JS 而不是 CSS 的充分理由。

【讨论】：

我同意。在我看来，严格的 doctypes 用于非常基本的或特定于项目的 HTML，这些 HTML 需要在最小的意义上不偏离（如嵌入式 HTML 显示等）

【解决方案5】：

我认为 kingjeffrey 的这个回答 css hover vs. javascript mouseover 很棒。我更喜欢这种方法，因为关闭 js 的用户仍然可以使用大多数浏览器的菜单，而使用旧浏览器的用户如果不关闭 js，仍然可以使用功能菜单。我认为这个解决方案将使菜单在大多数情况下都可用。

【讨论】：