css 滑鼠移動到按鈕圖片改變

來源:互聯網
上載者:User

在網上發現了很多的方法,有的是用js,這裡用了一個比較簡單的css的方法,很實用

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

<title>無標題文檔</title>

<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>

</html> 

 

link:平時的狀態   

visited:被訪問過之後

hover:滑鼠放上時

active:被按下時   

 

css中關於超連結的四個屬性一般正常順序為:link,visited,hover,active  一定要按上面的順序寫,不然顯示的可能會和你預想的不一樣

 

display:block;是將這行轉化為塊元素,具體為什麼我也不太清楚,不過就是要加

如果有文字可能還要加一句讓超連結沒有下滑線的代碼

 

這段是一列一列的按鈕

<!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 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>
</html>

相關文章

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.