這篇文章主要介紹css如何設(shè)置鼠標(biāo)變背景,文中介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們一定要看完!
css設(shè)置鼠標(biāo)變背景的方法:首先打開相應(yīng)的前端代碼文件;然后設(shè)置樣式為“.logo-link {background-image:url(...);}.logo-link:hover,.logo-link:active {}”即可。
CSS代碼實(shí)現(xiàn)鼠標(biāo)移過更換背景圖片
很多時(shí)候我們都能夠看到,當(dāng)我們用鼠標(biāo)移過去的時(shí)候,指向的圖片將會(huì)變成另外一個(gè)圖片。下面我就將實(shí)現(xiàn)該功能的代碼分享出來,希望能夠幫助到大家。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "/tupian/20230522/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title> new document </title> <meta name="generator" content="editplus" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <style type="text/css"> .logo-link { width:500px; height:500px; text-decoration:none; display:block; background-image:url(bj1.jpg); background-position:0px 0; background-repeat: no-repeat; } .logo-link:hover,.logo-link:active { background-position:0 0; background-image: url(bj2.jpg); } </style> </head> <body> <a href="http://www.baidu.com" class="logo-link"></a> </body> </html>
以上是css如何設(shè)置鼠標(biāo)變背景的所有內(nèi)容,感謝各位的閱讀!希望分享的內(nèi)容對(duì)大家有幫助,更多相關(guān)知識(shí),歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道!
本文題目:css如何設(shè)置鼠標(biāo)變背景-創(chuàng)新互聯(lián)
標(biāo)題來源:http://www.2m8n56k.cn/article6/ceggog.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供網(wǎng)站建設(shè)、面包屑導(dǎo)航、品牌網(wǎng)站制作、定制開發(fā)、網(wǎng)站維護(hù)、微信公眾號(hào)
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請(qǐng)盡快告知,我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如需處理請(qǐng)聯(lián)系客服。電話:028-86922220;郵箱:[email protected]。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來源: 創(chuàng)新互聯(lián)
猜你還喜歡下面的內(nèi)容