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