jQuery打造动态渐变按钮（6）
作者：mankaiviky 来源：蓝色理想 发布时间：2010-05-10 20:21:00
标签：jquery,动态,按钮,渐变
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
0
投稿猜你喜欢
2009年 6月6日,空间4岁啦！与此同时Qzone月登录用户2亿，同时在线用户也突破了1000万。这是让人欢欣雀跃的数字，在空间同事眼里，- <html><head><meta http-equiv="Content-T
- 随着十几年前“用户体验”这一概念的提出，“用户研究”也逐渐发展成为一个新兴的行业。那么，“用户研究”究竟包括哪些工作内容，在企业中如何开展，
- “点睛”的广告代码，很牛B，本想从中找出在FireFox下如何实现findText及pasteHTML类似效果的，我看了大半天，楞是没有看出
- 这可能是一个非常简单的问题，但是今天花一点点时间把这个简单的问题在说清晰一点，相信大家对ＣＳＳ的学习和认识会很有帮助，强化一些概念的东西，对
- 译者的话：寡妇、孤儿、捧打鸳鸯，这些场面足以让你有想哭的冲动，但当你在排版设计时，同样会碰到这些问题，甚至可能更槽。虽说今天的页面排版软件可
- 加强ASP网站后台安全一些主要措施：----------------------------------------------------
- 自从HTML5能为我们的新网页带来更高效洁净的代码而得到更多的关注，然而唯一能让IE识别那些新元素(如<article>)的途径
- 使用SQLSERVER的应该经常遇到“Unable to read local eventlog (reason:事件日志文件已在读取时间更
- 1. 鼠标的哪个按键被点击？<html><head><script type="text/javas
- 有些时候我们需要得到刚刚插入数据库中的条目id，用于相关系统的更改，在以前我是使用select+top 1+desc 这种笨方法实现的，在没
- 怎么用javascript进行拖拽本文译自：http://www.webreference.com/programming/javascri
- 关于Mysql的触发器，基本上每个Mysql教程里都有讲到，但是我发现那些教程里讲的都是如何处理其他表的数据。在Mysql中写触发器操作本表
- 1.函数array()功能:创建一个数组变量格式:array(list)参数:list为数组变量中的每个数值列,中间用逗号间隔例子:<
- 各大著名厂家、公司的banner广告设计欣赏，尺寸468x60，gif格式！有acer，阿尔卡特，AMD，中国电信，爱立信，Greatwal
- 继续Mootools的扩展，适用于Mootools 1.1及1.2，这次在Element扩展了两个非常简单的方法，一个用来获取
- 不知道您是否留意了，浏览本站时，浏览器右下角有一个标着top的黑色直角三角形，可以点击它返回到正在浏览的网页页眉。当滚动网页时，它的位置一直
- 今天无意在坛子里看到这样一个求救帖（这里），看了一下，感觉问题比较好解决。但是问题背后的问题却引起了我的反思。把他的页面整理一下看看（为了便
- 有个帖子写的检查全角的 <script> fun
- 问：我最近升级了一个应用程序，使其可以在 SQL Server 2005 上运行。我利用了允许行长度超出 8,060 个字节这项功能，以便用
