Recipe 8.9. Adding a Highlighting Effect on a Table Row

Problem

You want to highlight a whole row in a table when the cursor moves over a table cell within that table row (see Figure 8-9).

Solution

Use the :hover pseudo-class on the TR element:

tr:hover {  background: yellow;  }  

Figure 8-9. A table row is highlighted as the cursor moves across the table

Discussion

The pseudo-class :hover is commonly seen on links to create rollover effects. However, the CSS specification doesn't limit its use to just links. It can also be applied to other elements like p or div.

Support for this technique can be limiting because Internet Explorer 6 for Windows and previous versions will not create a hover effect on an element other than a link.

See Also

The CSS 2.1 specification for dynamic pseudo-classes at http://www.w3.org/TR/CSS21/selector.html#dynamic-pseudo-classes.