My studying notebook

2008/05/17

MouseOver & Out change Css Class Name

5/17/2008 12:41:00 PM Posted by Unknown 6 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

6 comments:

  1. Gaining Python certifications will validate your skills and advance your career.
    python certification

    ReplyDelete
  2. I learned World's Trending Technology from certified experts for free of cost. I got a job in decent Top MNC Company with handsome 14 LPA salary, I have learned the World's Trending Technology from Data science training in btm layout experts who know advanced concepts which can help to solve any type of Real-time issues in the field of Python. Really worth trying Instant Approval Blog Commenting Sites List

    ReplyDelete

  3. I loved reading your post because of clear font style and size.Very helpful content for readers.Thanks for posting.Enroll in big data courses and get placement assistant.Big data refers to the large, diverse sets of information that grow at ever-increasing rates
    big data training institute in btm

    ReplyDelete