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个步骤实现了一个动态渐变按钮,在演示中,我还提供了一个扩展示例,您可以跟着自己实现一个,也可以下载源代码修改定制,当然,您有什么好的提议或者有什么问题,欢迎给我留言。
本文地址:http://www.cnblogs.com/wiky/articles/gradual-change-button.html
本文链接:http://www.blueidea.com/tech/web/2010/7581.asp
出处:蓝色理想
责任编辑:moby
上一页 jQuery打造动态渐变按钮 [6] 下一页
◎进入论坛网页制作、WEB标准化版块参加讨论,我还想发表评论。
|