Highlight table row on mouseover
Post by indi on
Sep 9, 2008 12:08:08 PM CST
From usability point of view, it is good to highlight the row in a table when the user moves the cursor over that table row. It becomes very easy to see the row clearly in reports etc.
Here is the easiest way to achieve this using stylesheet (CSS)
tr:hover { background-color: COLOR_CODE;}
Now, if there are stylesheets assigned to show different colors for odd and even rows, then add a new hover directive as below.
tr.oddrow:hover { background-color: COLOR_CODE;}
tr.evenrow:hover { background-color: COLOR_CODE;}
The above stylesheet change will work in Firefox, but not in IE, unless the page is defined as strict DOCTYPE
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
Here is what Microsoft says about using :hover
----------------
Windows Internet Explorer 7 and later, in standards-compliant mode (strict !DOCTYPE), can apply the :hover pseudo-class to any element, not only links. If the pseudo-class is not applied specifically to an element in the selector, such as the A tag, the Universal (*) Selector is assumed. Indiscriminate use of the :hover pseudo-class can negatively impact page performance.
------------------
The other way to achieve this is using JavaScripting.
<tr onMouseOver="this.bgColor='yellow';" onMouseOut="this.bgColor='white';">
|
|
