很多软件产品中都不缺乏各种查询统计列表,而对于这些列表,鼠标经过时改变背景颜色这一特效功能虽看起来微不足道,但却是用户体验改善的重要功能。
下面是我们项目产品中用到的鼠标经过时改变背景颜色的一个示例:
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背景颜色变回正常状态。
通过以上的代码,即实现了鼠标经过列表时改变背景颜色,达到高亮提醒的一个用户体验改善的效果。