您當(dāng)前位置：首頁 > web前端 > htmlcss > css代碼實現(xiàn)鼠標(biāo)指向圖片翻轉(zhuǎn)效果

css代碼實現(xiàn)鼠標(biāo)指向圖片翻轉(zhuǎn)效果

來源：程序員人生發(fā)布時間：2014-04-28 06:24:37 閱讀次數(shù)：2695次

　　網(wǎng)(Liehuo.Net)教程今天有讀者詢問制作鼠標(biāo)經(jīng)過時切換圖片的效果，這種效果也稱為“翻轉(zhuǎn)”效果(roll-over)。原來這種效果大多使用Javascript實現(xiàn)，實際上用CSS可以非常方便地制作出來的。

　　這里給出一個最簡單的效果，在深入的復(fù)雜效果變化就非常多了，有興趣的讀者可以慢慢深入研究。

　　先看一下這個效果：

　　 <html><head><title>css代碼實現(xiàn)鼠標(biāo)指向圖片翻轉(zhuǎn)效果_網(wǎng)_liehuo.net</title><style>a:link, a:visited{display:block;width:128px;height:34px;font-size:14px;font-family:Arial;line-height:34px;text-align:center;color:black;text-decoration:none;background:url('/uploads/allimg/090809/1524563X7-0.gif') no-repeat;}/*注意這里的圖片路徑 liehuo.net*/a:hover, a:active{background:url('/uploads/allimg/090809/1524561063-1.gif') no-repeat;color:white;}</style><body><a href="#" _fcksavedurl="#">LieHuo.Net</a></body></html>
提示：可修改后代碼再運(yùn)行!

　　這個效果實現(xiàn)其實非常簡單，第一步：準(zhǔn)備兩個圖片，大小完全相同即可，這里是128X34像素。

　　左邊這個是通常狀態(tài)時的圖片，叫background.gif，右邊這個市鼠標(biāo)經(jīng)過時的圖片，叫background-hover.gif。

　　第二步，寫HTML部分的代碼：

<a href="#">LieHuo.Net</a>

　　就是一個非常普通的超鏈接文本，如果希望完全使用圖片而不是用任何文字，也可以。

　　第三步：CSS部分的代碼是這樣的：

a:link, a:visited{
display:block;
width:128px;
height:34px;
font-size:14px;

font-family:Arial;
line-height:34px;
text-align:center;
color:black;
text-decoration:none;

background:url('/uploads/allimg/090809/1524563X7-0.gif') no-repeat;
} /*注意這里的圖片路徑 liehuo.net*/

a:hover, a:active{
background:url('/uploads/allimg/090809/1524561063-1.gif') no-repeat;
color:white;
}

　　好了，這個效果就完成了，是不是非常簡單。下面簡單解釋一下CSS代碼的含義。

　　第1~14行代碼是定義鼠標(biāo)沒有經(jīng)過超鏈接時的CSS樣式：

　　首先要把a(bǔ)元素變?yōu)閴K級元素，然后設(shè)定它的高度和寬度與圖片相同。

　　然后是文字放到圖片的中心位置。

　　最后設(shè)定背景圖像的地址。

　　接下來的第16~19行代碼定義鼠標(biāo)經(jīng)過時所需要變化的CSS樣式。

　　把文字的顏色由黑色變?yōu)榘咨褕D片換成另一個圖片即可了。

生活不易，碼農(nóng)辛苦
如果您覺得本網(wǎng)站對您的學(xué)習(xí)有所幫助,可以手機(jī)掃描二維碼進(jìn)行捐贈
程序員人生