JQuery 学习:鼠标移动变色效果

时间:2013-08-12 13:39 来源:互联网 作者:源码搜藏 收藏

在某些场合,响应鼠标移动变色可以带来很好的用户体验。比如在表格或者列表中,鼠标移过的时候背景变成淡淡的蓝色,可以帮助用户知道他所在的那一行。用户体验都是从小的细节慢慢积累开来的。 这个效果主要是hover()的使用。 效果演示 欢迎访问简明现代魔法

在某些场合,响应鼠标移动变色可以带来很好的用户体验。比如在表格或者列表中,鼠标移过的时候背景变成淡淡的蓝色,可以帮助用户知道他所在的那一行。用户体验都是从小的细节慢慢积累开来的。

这个效果主要是hover()的使用。

效果演示


  • 欢迎访问简明现代魔法
  • Welcome to NowaMagic
  • 欢迎访问简明现代魔法
  • Welcome to NowaMagic
  • 欢迎访问简明现代魔法
  • Welcome to NowaMagic
  • 欢迎访问简明现代魔法
  • Welcome to NowaMagic

JQuery Code

1 <script type="text/javascript">
2 $(document).ready(function(){
3     $("#orderedlist li").hover(function(){
4         $(this).addClass("back");
5     }, function(){
6         $(this).removeClass("back");
7     });
8 });
9 </script>

这个效果还可以应用于表格:

姓名 QQ Email
Gonn 252211974 gonnsai@163.com
Gonn 252211974 gonnsai@163.com
Gonn 252211974 gonnsai@163.com
Gonn 252211974 gonnsai@163.com
Gonn 252211974 gonnsai@163.com
Gonn 252211974 gonnsai@163.com

JQuery Code

1 <script type="text/javascript">
2 $(document).ready(function() {
3     $("#orderedlist tbody tr").hover(function() {
4         $(this).addClass("back");
5     }, function() {
6         $(this).removeClass("back");
7     });
8 });
9 </script>

jQuery技术阅读排行

最新文章