中文字幕二区_国产精品免费在线观看_黄色网站观看_人人草人人澡_日本真实娇小xxxx

Step4 - CSS修改

在純CSS效果的示例中，我們是利用:hover偽類來實現sprite圖片的切換，當我們使用jQuery后，是引入一個<span>層作為鼠標經過時背景圖，所以CSS需要做如下修改：

/*之前的按鈕懸停樣式*/
.button:hover{  
    background:url(bg_button.gif) bottom no-repeat; 
} 

修改為  

/*不需要在設置:hover的樣式，而是設置span.hover的樣式*/
.button span.hover {  
    /*注意要使用絕對定位*/
position: absolute;   
    display: block;  
    width:200px;  
    height:80px;  
    background:url(bg_button.gif) bottom no-repeat;  
    text-indent:-9999px; 
}

總結

以上我們按4個步驟實現了一個動態(tài)漸變按鈕，在演示中，我還提供了一個擴展示例，您可以跟著自己實現一個，也可以下載源代碼修改定制，當然，您有什么好的提議或者有什么問題，歡迎給我留言。

• 查看最終效果
• 下載源代碼

本文地址：http://www.cnblogs.com/wiky/articles/gradual-change-button.html

本文鏈接：http://www.95time.cn/tech/web/2010/7581.asp　

出處：藍色理想
責任編輯：moby

上一頁 jQuery打造動態(tài)漸變按鈕 [6] 下一頁

◎進入論壇網頁制作、WEB標準化版塊參加討論，我還想發(fā)表評論。