Using CSS only to Change backcolor of GridView or any table rows onmouseover
Using CSS only to Change backcolor of GridView or any table rows onmouseover
I just learned a technique of applying a hover effect to an HTML table�s rows with the help of CSS, without using a single line of JavaScript, C#, VB, � etc. code.. all you hace to do is to define a new class with :hover selector..
| Row Number 1 |
| Row Number 2 |
| Row Number 3 |
Lets suppose you have the following styles in your CSS file:
.tableClass
{
font-family: Tahoma;
font-size: 9pt;
font-weight: normal;
color: #3d3d3d;
}
.tableRow
{
color: #3d3d3d;
background-color: #daf1f2;
}
.tableAlterRow
{
background-color: #ece9ea;
color: #3d3d3d;
}
To give the hover effect onmouseover, just add your styles to the following:
.tableClass tr. tableRow:hover,
.tableClass tr. tableAlterRow:hover,
.tableRow:hover,
.tableAlterRow:hover
{
background-color:#199dbf !important;
font-weight: bold;
}
Easy, right ;) !?
