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';">
|
|
|
|
|
|
 |
|
|
 |
How to develop a Flxexible Web Design | Mar 5, 2013
|
|
Website comments on updates / improvements please | Feb 28, 2013
|
|
WebsiteGear Introduces Unlimited Web Survey Plan | Dec 4, 2012
|
|
HTML TAGGING PROJECT CONVERSION 100% QUALITY | Nov 28, 2012
|
|
Backup Your Files, Photos, Music online For Free | Nov 25, 2012
|
|
5 common link building mistakes | Aug 27, 2011
|
|
How to convert psd into html? | Jan 15, 2011
|
|
How to choose the right PHP Framework for web deve | Jan 12, 2011
|
|
|
|
|
