演示地址:http://www.5dworld.net/css/reversal.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<style type="text/css">
/*通过改变背景图像翻转,需两张图片*/
.reversal:link,.reversal:visited{display:block;width:122px;height:37px; background:url(images/zc_05.gif)}
.reversal:hover{background:url(images/zc_07.gif)}
/*通过改变背景图像位置翻转,将两张图片合为一张;这种较好,可以避免浏览器下载另一张图片出现闪烁*/
.reversal2:link,.reversal2:visited{display:block;width:122px;height:37px; background:url(images/zc.gif); background-position:0 -37px;}
.reversal2:hover{background-position:0 0;}
</style>
</head>
<body>
<a href="#" class="reversal"></a>
<br />
<a href="#" class="reversal2"></a>
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<style type="text/css">
/*通过改变背景图像翻转,需两张图片*/
.reversal:link,.reversal:visited{display:block;width:122px;height:37px; background:url(images/zc_05.gif)}
.reversal:hover{background:url(images/zc_07.gif)}
/*通过改变背景图像位置翻转,将两张图片合为一张;这种较好,可以避免浏览器下载另一张图片出现闪烁*/
.reversal2:link,.reversal2:visited{display:block;width:122px;height:37px; background:url(images/zc.gif); background-position:0 -37px;}
.reversal2:hover{background-position:0 0;}
</style>
</head>
<body>
<a href="#" class="reversal"></a>
<br />
<a href="#" class="reversal2"></a>
</body>
</html>
405
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
