鼠标经过时改变背景色 [复制链接]

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

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

css代码：

tr.over td {
    backgroundffffcc;
    }

这段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背景颜色变回正常状态。

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