首頁  >  文章  >  web前端  >  CSS怎麼控制滑鼠劃過時變換圖片?

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

藏色散人
藏色散人原創
2018-08-06 16:42:152357瀏覽

當我們用滑鼠滑動瀏覽網頁時,總是會被突然變化的圖片吸引目光,這大大的提高了使用者體驗,帶來更高的效率。那麼這篇文章就是主要介紹用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怎麼控制滑鼠劃過時變換圖片?

附註:

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

【相關文章推薦】

CSS3的滑鼠移入圖片動態提示效果

詳解CSS實現滑鼠上移事圖示旋轉效果的方法

JS與CSS3實作圖片回應滑鼠移動放大效果範例




##

以上是CSS怎麼控制滑鼠劃過時變換圖片?的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn