CSS中怎么實(shí)現(xiàn)鼠標(biāo)移動切換圖片

發(fā)布時間：2021-07-22 15:27:18 來源：億速云閱讀：225 作者：Leah 欄目：web開發(fā)

本篇文章為大家展示了CSS中怎么實(shí)現(xiàn)鼠標(biāo)移動切換圖片，內(nèi)容簡明扼要并且容易理解，絕對能使你眼前一亮，通過這篇文章的詳細(xì)介紹希望你能有所收獲。

<!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>純CSS圖片特效</title> 
<style> 
.vip-uc-but{ height:auto; width:600px;} 
.vip-uc-but div{height:90px; float:left; } 
.vip-uc-but a{height:90px} 
.vip-uc-a a{background:#ccc; width:95px; display:block;} 
.vip-uc-a a:hover{background:url(/jscss/demoimg/wall_s1.jpg) no-repeat;} 
.vip-uc-b a{background:#ccc;width:95px; display:block;} 
.vip-uc-b a:hover{background:url(/jscss/demoimg/wall_s2.jpg) no-repeat;} 
.vip-uc-c a{background:#ccc; width:95px; display:block;} 
.vip-uc-c a:hover{background:url(/jscss/demoimg/wall_s3.jpg) no-repeat;} 
.vip-uc-d a{background:#ccc; width:95px; display:block;} 
.vip-uc-d a:hover{background:url(/jscss/demoimg/wall_s4.jpg) no-repeat;} 
.vip-uc-but a:link,.vip-uc-but a:visited,.uc-regis-but a:link,.uc-regis-but a:visited{color:#fff; font-size:0px;} 
.vip-uc-but a:hover{color:#d7d7d7;} 
</style> 
</head> 
<body> 
<div class="vip-uc-but"> 
<div class="vip-uc-a"><a href="#">修改密碼</a></div> 
<div class="vip-uc-b"><a href="#">修改個人資料</a></div> 
<div class="vip-uc-c"><a href="#">查看郵件</a> </div> 
<div class="vip-uc-d"><a href="#">優(yōu)幣查詢提現(xiàn)</a> </div> 
</div> 
</body> 
</html>

上述內(nèi)容就是CSS中怎么實(shí)現(xiàn)鼠標(biāo)移動切換圖片，你們學(xué)到知識或技能了嗎？如果還想學(xué)到更多技能或者豐富自己的知識儲備，歡迎關(guān)注億速云行業(yè)資訊頻道。

向AI問一下細(xì)節(jié)

CSS中怎么實(shí)現(xiàn)鼠標(biāo)移動切換圖片

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽