首页 > 代码库 > css 鼠标移动到按钮图片改变
css 鼠标移动到按钮图片改变
方法一：
<style>
.pp a
{
width:575px;
height:157px;
background:url(1.jpg);/*图片地址*/
display:block;
}
.pp a:hover
{
width:575px;
height:157px;
background:url(2.jpg);/*替换的图片地址*/
display:block;
}
</style>
</head>
<body>
<div class="pp"><a href="http://www.mamicode.com/#"></a></div>
</body>
方法二：
link:平时的状态
visited:被访问过之后
hover:鼠标放上时
active:被按下时
css中关于超链接的四个属性一般正常顺序为：link，visited，hover，active 一定要按上面的顺序写，不然显示的可能会和你预想的不一样
<style type="text/css">
*{ margin:0; padding:0;}
ul li{ list-style:none;}
.nav{ width:800px; height:40px; margin:150px auto;}
.nav ul li{ float:left; width:200px;}
.nav ul li a:link,a:visited{ display:block; width:190px; height:40px; background:url(1.jpg);} /*链接、点击后*/
.nav ul li a:hover{background:url(2.jpg);} /*鼠标经过*/
.nav ul li a:active{background:url(3.jpg);} /*点击时*/
</style>
<body>
<div class="nav">
<ul>
<li><a href="http://www.mamicode.com/#"></a></li>
<li><a href="http://www.mamicode.com/#"></a></li>
<li><a href="http://www.mamicode.com/#"></a></li>
</ul>
</div>
</body>
css 鼠标移动到按钮图片改变