MouseOver & Out change Css Class Name

住在台北的朋友
如果對電腦相關有興趣的人
應該對於天瓏書局不陌生

再買完想要買的書(Stylin' with CSS)之餘
又翻了其它相關的書
其中在CSS Mastery看到了一個之前寫GridView想要作的效果
在滑鼠移動到Column時
能夠改變Column的顏色

當然這個功能可以直接用Code Behind的方法來完成
如果不想要用Code Behind的方法
亦可以選擇利用Css的Style來完成

Code Behind 方法：
protected  void GridView1_RowDataBound(object sender, GridViewRowEventArgs e){
if (e.Row.RowType == DataControlRowType.DataRow){
e.Row.Attributes.Add("onmouseover", "this.style.backgroundColor='blue'");
e.Row.Attributes.Add("onmouseout", "this.style.backgroundColor='white'");
}
}

Css Method：

1. Embed Css Style:
   

   tr.on{background-color:#bbccaa;color:#446666;}
   tr.off{background-color:#446666;}
   

2. Add tr Attribute:
   

   tr class="off" onmouseover="this.className='on'" onmouseout="this.className='off'"

Example

CustomerID	CompanyName	ContactName
ALFKI	Alfreds Futterkiste	Maria Anders
ANATR	Ana Trujillo Emparedados y helados	Ana Trujillo
ANTON	Antonio Moreno Taqueria	Antonio Moreno
AROUT	Around the Horn	Thomas Hardy