Question

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

Answer 1

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

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

但您需要注意以下几点：

IE6仅支持:hover标记

<a>

CSS中指定但未在页面上使用的图像将不会立即加载（意味着翻转状态可能需要一秒时间才能显示）

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

这很简单，核心原则是你创建一个大于元素的图像，将图像设置为背景图像，并使用background-position定位它，这样只有你想要的位可见。这意味着要显示悬停状态，您只需要重新定位背景 - 根本不需要加载额外的文件。这是一个快速而肮脏的例子（这个例子假设你有一个20px高的元素，一个包含悬停和非悬停状态的背景图像 - 一个在另一个上面（所以图像是40px高））： / p>

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的唯一方法是使用不支持的特殊图像过滤器{ {1}}）

Answer 2

如果浏览器恰好禁用了Javascript，它仍然可以在CSS中使用。

Answer 3

因为它是演示文稿的一个方面，我会说它是基于CSS的更多标准。它曾经在Javascript中完成，仅仅是因为我们无法使用CSS（旧的浏览器很糟糕，我不认为：hover甚至被添加到CSS 2之前）。

Answer 4

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

Answer 5

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

Answer 6

我会留在房子的CSS一边，但我做了很少的Javascript。

CSS似乎比Javascript更容易跨浏览器进行标准化，但随着Chrome V8和Firefox即将推出的新渲染工具的出现，这可能会有所改变。

Answer 7

是不是有记忆CSS中声明序列的助记符？

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

7 个答案: