简明现代魔法 -> JQuery -> JQuery 学习:鼠标移动变色效果

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

2010-05-04

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

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

效果演示

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

JQuery Code

<script type="text/javascript">
$(document).ready(function(){
	$("#orderedlist li").hover(function(){
		$(this).addClass("back");
	}, function(){
		$(this).removeClass("back");
	});
});
</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

<script type="text/javascript">
$(document).ready(function() {
	$("#orderedlist tbody tr").hover(function() {
		$(this).addClass("back");
	}, function() {
		$(this).removeClass("back");
	});
});
</script>
随机文章推荐
网站分类


注:如需转载本文,请注明出处(原文链接),谢谢。更多精彩内容,请进入简明现代魔法首页。

进入新博客
喜欢本文,就分享它吧
给我留言
您的名字:
您的邮件:
您的网站:


 

copyright © 2009 简明现代魔法    学习、分享、进步

power by Gonn 感谢所有关心和支持本站的朋友们