CSS怎麼控制滑鼠划過時變換圖片?

來源:互聯網
上載者:User
當我們用滑鼠滑動瀏覽網頁時,總會被突然變化的圖片吸引目光,這大大的提高了使用者體驗,帶來更高的效率。那麼本篇文章就是主要介紹用css怎麼控制滑鼠划過時變化圖片,有需要的朋友可以參考一下。

CSS控制滑鼠划過時變換圖片的具體程式碼範例如下:

<style type="text/css">    .demo {        width:500px;        height:400px;        text-decoration:none;        display:block;        background-image:url(1.png);        background-position:0px 0;        background-repeat: no-repeat;    }    .demo:hover,.demo:active {        background-position:0 0;        background-image: url(2.png);    }</style></head><body><a href="http://www.php.cn" class="demo"> </a></body>


註:

CSS :hover 選取器用於選擇滑鼠指標浮動在上面的元素並且可用於所有元素,不只是連結。

相關文章

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.