Using Pseudo-Classes to set Hover style on the WebDataGrid

Using Pseudo-Classes in CSS you can easily set hover appearance on any html element. Just specify the “<element>:hover” class to any element and you get a nice hover style attached to that element on the page. Since, all of the Infragistics controls use CSS styles for their look & feel; it is very easy to use pseudo-classes to target any of the control elements. CSS standard for “:hover” has improved over time to support all DOM elements, and today it is supported in all the modern browsers. However, it is not fully supported in older browsers, and by that I specifically mean IE6. IE6 supports “:hover” only for anchor tags. So, if you are using IE 6 and want to set hover appearance for element other than "<a>" then you have to use the old-fashion way of handling mouse event, and swaping element styles.

So, if your users have moved away from IE 6 and onto the newer browsers (lucky you!) and you want to use pseudo-class to set a hover style on the WebDataGrid row, you can place the following style in the grid’s style sheet or add it on the page.

tbody.igg_Item>tr:hover>td
{
 background-color:Gray;
 color: White;
}

 Similarly, if you want to set a hover style on a cell you can use the style that will target a TD inside of a grid. Now, when you hover over cells, you get the style applied accordingly.

tbody.igg_Item>tr>td:hover
{
 background-color:Gray;
 color: White;
}
 

You can read more on the pseudo classes in CSS and its support for different browsers here. Pseudo classes are really powerful feature and help build stylable application with ease, which was really problematic in the old days of having to use JavaScript to capture mouse over and out events and apply/switch styles accordingly.

Enjoy!