任务：
要在网站上所有按钮上加上一个动态效果
于是我想到了，背景变换1像素高的方法。
比如当前背景位置是默认的 0px 0px
你改成0px 1px 就向下移动了一个像素
一般css是这样写
[code]
.nav-previous a:link{ background:url(../../../img/post_bot.jpg) no-repeat; display:block; }
.nav-previous a:hover{ background:url(../../../img/post_bot.jpg) 0px 1px no-repeat; display:block; }
[/code]
就是鼠标移动过后变换1像素的背景，感觉像是按下去一样。
这是针对背景在A标签上，A标签也比较好兼容，很多浏览器不支持li：hover
属性。
现在就有一个问题了
我碰到一个按钮，代码如下：
这个按钮我是用一个but_2的class添加了一个背景，要实现开头说的动态效果，用html我还没想到如何做。除非你在外面嵌套一个A标签吧？
于是我就用一行小小的js代码解决了这个事情；
代码如下：
[code lang=”js”]
<script>
var sfs=jQuery.noConflict();
sfs(document).ready(function() {
sfs(".but_2").mouseover(function(){sfs(this).css("background-position","0px 1px");});
sfs(".but_2").mouseout(function(){sfs(this).css("background-position","0px 0px");});
});
</script>
[/code]
我这是用jquery写的，所以你必须在head加载jquery库：
script type=”text/javascript” src=”http://shanmao.me/f/jquery.min.js”
代码是这样工作的：首先我用sfs替代了通用的$标签
然后查找.but_2这个class，执行添加css的操作
当我鼠标移动到按钮时background-position：0px 1px；
当鼠标移开时则还原默认！
OK就先到这里le.
By shanmao.me at 2012.1.11 22:10