样式里面伪类:hover这些，FireFox支持的比较正常，但是IE6里面，这些伪类只能对a标签有效果。
但是IE中a标签的宽度和高度定位大小定位的不太好。
如果你一定要用样式做，那可能只能这样。
4个标签的图片大小相同
#aa a:link,a:visted{background-Image:URL(/*按钮形态的图片地址*/)text-decoration:nonecolor:#ffc5bbwidth:50px/*左右吧，具体要看图片大小*/height:50px/*也是看图片大小*/}
#aa a:hover,a:active{background-Image:URL(/*鼠标移上时候的图片地址*/)color:#ffc5bbwidth:50pxheight:50px}
<div id=aa><a href="#">地图</a><a href="#">xxx</a></div>
但是你下面要变的话只能用javascript来隐藏层或者动态创建层了。
需要准备的材料分别有：电脑、浏览器、html编辑器。
1、首先，打开html编辑器，新建html文件，例如：index.html。
2、在index.html中的<style>标签中，输入css代码：button {background-color: #00a7d0}
button:hover {background-color: #ff7701}。
3、浏览器运行index.html页面，此时显示出了蓝色背景颜色的按钮。
4、将鼠标移入按钮，此时按钮的背景颜色变成了橙色。
看看下面的代码<!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/htmlcharset=gb2312" />
<title>像文字一样的按钮</title>
<style>
form{
margin:0pxpadding:0px
font:14px
}
input{
font:14px Arial, Helvetica, sans-serif
}
.txt{
border-bottom:1px solid #005aa7 /*下划线效果*/
color:#005aa7
border-top:0pxborder-left:0px
background-color:transparent /*背景色透明*/
}
.btn{
background-color:transparent
border::0px /*边框取消*/
}
</style>
</head>
<body>
<form method="post">
请输入您的信息:<input type="text" name="name" id="name" class="txt">
<input type="submit" name="btnSubmit" id="btnSubit" value="Submit>>" class="btn">
</form>
</body>
</html>
