您當前位置：首頁 > web前端 > htmlcss > css代碼實現鼠標指向圖片翻轉效果

css代碼實現鼠標指向圖片翻轉效果

來源：程序員人生發布時間：2014-04-28 06:24:37 閱讀次數：2704次

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

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

　　先看一下這個效果：

　　 <html><head><title>css代碼實現鼠標指向圖片翻轉效果_網_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>
提示：可修改后代碼再運行!

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

　　左邊這個是通常狀態時的圖片，叫background.gif，右邊這個市鼠標經過時的圖片，叫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行代碼是定義鼠標沒有經過超鏈接時的CSS樣式：

　　首先要把a元素變為塊級元素，然后設定它的高度和寬度與圖片相同。

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

　　最后設定背景圖像的地址。

　　接下來的第16~19行代碼定義鼠標經過時所需要變化的CSS樣式。

　　把文字的顏色由黑色變為白色，并把圖片換成另一個圖片即可了。

生活不易，碼農辛苦
如果您覺得本網站對您的學習有所幫助,可以手機掃描二維碼進行捐贈
程序員人生