很多软件产品中都不缺乏各种查询统计列表,而对于这些列表,鼠标经过时改变背景颜色这一特效功能虽看起来微不足道,但却是用户体验改善的重要功能。

 

下面是我们项目产品中用到的鼠标经过时改变背景颜色的一个示例:

 

css代码:

 

tr.over td {


background:#ffffcc;


}

 

这段css的意思是出现tr标记的地方使用了.over样式和td标签,那么背景色都会是#FFFFCC。

如下html:

 <table border="0" cellpadding="0" cellspacing="0" class="new-list-table" id="myTable">

   <tr>

<td>法规遵循</td>

<td>厂商名称</td>

<td>配置人</td>

<td>配置时间</td>

<td>部署状态</td>

<td>操作</td>

</tr>

</table>

 

但是单是这样,html还不能和css联系起来。

 

除非加上以下的jQuery的js代码:

 

$(document).ready(function(){

 

 $(".new-list-table tr").mouseover(

 

function() {

 

$(this).addClass("over");

 

}).mouseout(function() {$(this).removeClass("over");});

 

})

 

 

 

这段js代码的意思是当鼠标移入到用了“.new-list-table"样式的”tr“行上时,添加一个样式类"over",联系css代码时,该表下的td背景颜色就会变成#FFFFCC,当鼠标移出时,删除样式类"over",则td背景颜色变回正常状态。

 

通过以上的代码,即实现了鼠标经过列表时改变背景颜色,达到高亮提醒的一个用户体验改善的效果。




Related posts

coded by nessus
分享:  DeliciousGReader鲜果豆瓣CSDN网摘
Trackback

no comment untill now

Add your comment now

无觅相关文章插件