page 4 of 4 Table Row Rollover

The previous examples all used JavaScript event handlers to highlight the cells in a row on the mouseover event and restore the colors on the mouseout event. This approach uses Cascading Styles Sheets exclusively. There are no JavaScript, no event handlers.

CSS Hover, W3C Standard  

The first technique works in newer W3C standard compliant browsers. It uses cascading style sheets as envisioned by the organization who writes the recommendation specifications.

Try it out; see if it works with your browser.

Let's take a look at the code, actually the CSS there's no JavaScript

    <style type="text/css">
        .myClass:hover td {background-color: yellow; color: black;}
        .myClass:hover td.odd {background-color: black; color: yellow;}
        .myClass:hover th {background-color: red;}
    </style>

That's it! Three lines of style rules using the pseudo class hover. A row class is used instead of just TR to avoid a conflict with other examples on this page. Otherwise .myClass could be replaced with tr.

Now for the html:

    <table>
        <tr class="myClass"><td>Data 1.1</td></tr>
    </table>

Each row (TR element) to be affected by the mouseOver (hover) has a common class, in our example myClass, That's it! This has the least coding of all methods and fits in with the concept of separating content from format.

Pseudo CSS Hover for IE  

But, you have to support IE, and IE only supports hover on links. Well, don't despair. We have a fix for you. IE has a feature they call Dynamic Properties. This feature can be used with CSS to achieve the same results. There is more on the use of expression in Extend IE Hover. Check out this table.

Okay, you got me. This isn't, strictly speaking, a CSS solution since it embedded JavaScript into the CSS. And could be done without script tags and it has the feel of CSS so we can hedge. It is cross browser friendly because other browsers will ignore the IE specific parts and extra steps like browser sniffing and loading special code for IE are avoided. For this example, functions were declared prior to the styles.

Now check out this CSS.

    <style type="text/css">
        td.hlt,
        .myClass2:hover td {
            background-color: yellow;
            color: black;
        }
        td.hlt-odd,
        .myClass2:hover td.odd {
            background-color: black;
            color: yellow;
        }
        th.hlt, th.hlt-odd,
        .myClass2:hover th {background-color: red;}
        .myClass2 {
            h: expression(onmouseover=over);
            o: expression(onmouseout=out);
        }
    </style>

The attribute names for expression have no meaning in this application of the method.

The three style rules from the above example remain and work in non-IE browsers the same. Added to those style rules are additional selectors. Any cell that matches td.hlt (a td with class hlt) is style the same as a hover on a TD, and so on. The additional style rule for class .myClass2 covers IE pseudo hover. Unlike the way this was handle in Pseudo CSS Hover for IE, only a function name, which is a function object, is assigned to onmouseover and onmouseout. I chose this route because the functions are more complex and it was easier to write them.

The attributes h and o, in this case, only serves to run the expression method, the names are not significant. The expression method makes an object property assignment to the cells event handler property. This is not the same as making the assignment in HTML (in-line). When the assignment is in-line (onMouseOut = "function_name();") the pronoun this in the function does not refer to the element, but rather it refers to the window. That is, onmouseout is a method of the element and function() is an outside global function. Assigning the handler (function) object to the property of an element gives it the elements context and "this" then refers to the element.

Here are the functions.

    <script type="text/javascript">
        function over() {
            for (var i = 0, x = 0; i < this.cells.length; i++, x = i%2) {
                if (x) this.cells[i].className = 'hlt-odd';
                else this.cells[i].className = 'hlt';}
                }
        function out() {
            for (var i = 0,  x = 0; i < this.cells.length; i++, x = i%2) {
                if (x) this.cells[i].className = 'odd';
                else this.cells[i].className = '';}
            }
    </script>

This is the same concept used for Walking the Row shown on the previous page; albeit split in two. I bet you didn't expect that to come up again! The for loop has been taken out of that function for use here.

An example using simply myClass:hover {attribute: values} was skipped because it is not supported by IE, and there are issue with overriding TD styles. By using styles that applied to the cells as descendants of the row, the example easily convert to the IE expression and is more robust.

Summary

Which method you choose depends on what browsers you need or want to support, and how important the effect is to achieving the page's purpose. Having pages degrade gracefully is as much apart of good Web design and programming as getting effects working on a variety of platforms. If you are developing for an organization's internal use, you can limit the browsers you have to support. But, for open public use, you should strive to support all browsers either by having the effect work or having the page degrade and still be effective.