My studying notebook

2008/05/17

MouseOver & Out change Css Class Name

5/17/2008 12:41:00 PM Posted by Kai-Chu Chung No comments
住在台北的朋友
如果對電腦相關有興趣的人
應該對於天瓏書局不陌生

再買完想要買的書(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
CustomerIDCompanyNameContactName
ALFKIAlfreds FutterkisteMaria Anders
ANATRAna Trujillo Emparedados y heladosAna Trujillo
ANTONAntonio Moreno TaqueriaAntonio Moreno
AROUTAround the HornThomas Hardy

0 comments:

Post a Comment