如何用CSS控制按钮图片切换
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了如何用CSS控制按钮图片切换相关的知识，希望对你有一定的参考价值。
求代码发上谢谢
谁说CSS不能实现？ CSS你玩好了连WOW都可以做出来
我都研究出来了
<style>
.box2
.box2 imgdisplay:block; padding:2px; border:0;
.box2 acolor:#333; text-decoration:none;border:0px solid #FFF; float:left; cursor:hand;
.box2 a spandisplay:none; color:#F00;
.box2 a:hovercolor:#999; border:0px solid #333;
.box2 a:hover spandisplay:inline; position:absolute;
</style>
</head>
<body>
<h2>CSS</h2>
<table class="box2">
<tr>
<td>
<a href="#"><span><img src="02.jpg" /></span>
<img src="01.jpg" /></a>
</td>
</tr>
</table>
</body>
准备两张图片放在一起就行了
<!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>
</head>
<style>
#menu5
width: 200px;
margin: 10px;
#menu5 li a
height: 32px;
voice-family: "\\"\\"";
voice-family: inherit;
height: 24px;
text-decoration: none;
#menu5 li a:link, #menu5 li a:visited
color: #FFF;
display: block;
background: url(menu5.gif);
padding: 8px 0 0 10px;
#menu5 li a:hover
color: #FFF;
background: url(menu5.gif) 0 -32px;
padding: 8px 0 0 10px;
</style>
<body>
<div id="menu5">
<ul>
<li><a href="#1" title="Link 1">Link 1</a></li>
<li><a href="#2" title="Link 2">Link 2</a></li>
<li><a href="#3" title="Link 3">Link 3</a></li>
<li><a href="#4" title="Link 4">Link 4</a></li>
<li><a href="#5" title="Link 5">Link 5</a></li>
</ul>
</div>
</body> </html>
下面是背景图片。
以上是关于如何用CSS控制按钮图片切换的主要内容，如果未能解决你的问题，请参考以下文章