美创科技技术社区

注册

 

发新话题 回复该主题

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

1#

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

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


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


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

分享 转发
TOP
发新话题 回复该主题