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

來源:互聯網
上載者:User

標籤:

方法一:

<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 滑鼠移動到按鈕圖片改變

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

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.