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

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的技术可以防止这个问题,你可以找到一个使用该技术的例子来进行无预加载翻转.

它非常简单,核心原则是您创建一个大于元素的图像,将图像设置为背景图像,并使用它来定位它,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使用不支持的特殊图像滤镜background-position)

Answer 2

如果浏览器恰好禁用了Javascript,它仍将在CSS中运行.