在某些场合，响应鼠标移动变色可以带来很好的用户体验。比如在表格或者列表中，鼠标移过的时候背景变成淡淡的蓝色，可以帮助用户知道他所在的那一行。用户体验都是从小的细节慢慢积累开来的。
这个效果主要是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>
|
这个效果还可以应用于表格：
| 姓名 | ||
|---|---|---|
| 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>
|