標籤:
方法一:
<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="#"></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="#"></a></li>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
</ul>
</div>
</body>
css 滑鼠移動到按鈕圖片改變