Posts Tagged ‘CSS’

ASP.NET 2.0学习笔记-用CSS轻松实现GridView行随鼠标移动变色

Sunday, November 16th, 2008

change GridView’s row’s color through CSS while mouse moving
看到网上有很多人都在讨论这个问题,各方高手出马给出各家的方法,虽然有的用JavaScript实现这种效果,但方法过于复杂.往往要写一大堆函数,而且很容易出错.另有人给出在GridView的RowDataBind事件中给Row添加一个属性实现行的颜色随鼠标的移动而变化,其实也是用JavaScript实现的.用JavaScript都有两个不好的地方:一是当鼠标快速移过大量的行的时候,CPU的使用率会非常高,而且如果访问都的浏览器的JavaScript功能被禁用的话,这个时候根本就不能达到变色的效果.而使用CSS就不一样了,只要用一个支持W3C标准的浏览器访问即可实现.好了,费话少说,看正题:

首先在所需的ASPX页面上添加一个包含如下的样式表:

<style type=”text/css”>
 .ItemTr {     background-color:silver; }
 .ItemTr:hover {     background-color:#ff8040; }
</style>

转到设计界面,选中GridView,打开其属性面板,点出RowStyle,将CssClass右边的值修改为ItemTr,这时候编译文件再在浏览器中查看便可看到实现效果了.

需要提醒的是要想使行的颜色随鼠标的移动而改变,一定不能单独设置单元格的背景色,也就是说在GridView里面不能单独设置每个列的ItemStyle的background-color属性,如果同时设置单元格和行的背景色属性会发生冲突,浏览器会优先根据单元格的属性显示.