CSS 图像翻转

Question

我有使用 CSS 处理图像翻转的脚本。我想知道这是否是执行 CSS 翻转的正确方法？我还想知道这是否好，你如何处理其他翻转图像你是否必须为每个图像都有一个单独的 css？

这是一个例子:http://jsfiddle.net/GFec3/40/

CSS 代码:

a.rollover {
   display: block;
   width: 27px;
   height: 25px;
   text-decoration: none;
   background: url("http://www.gdisinc.com/barker/images/menubar/bnt_facebook.jpg");
}

a.rollover:hover {
   background-position: -350px 0;
}

.displace {
   position: absolute;
   left: -5000px;
}

HTML

 <a href="#" class="rollover" title="Webvamp" width="54" height="25"><span class="displace">TEST</span></a>

这可行，但只是想知道是否有一种特殊的方法来处理多于一个翻转图像？

Answer 1

您不必在 css 中使用背景图像。示例:

<STYLE type="text/css">
.roll .on { display: none; }
.roll .off { display: block; }
.roll:hover .on { display: block; }
.roll:hover .off { display: none; }
</STYLE>
<DIV class="roll">
  <IMG class="on" src="...">
  <IMG class="off" src="...">
</DIV>

有很多方法可以做到这一点。选择哪个由您决定。