The previous examples all used JavaScript event handlers to highlight the cell on the mouseover event and restore the colors on the mouseout event. This second approach uses Cascading Styles Sheets exclusively. There is 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.

Tested successfully on
Netscape 7.1+,Konqueror 3.0.5+, Mozilla 1.3.1 Opera 7.21, FireFox, Mozilla 1.3.1, Mozilla 1.7+
Failed on
Opera 6.0.2, IE 5.0, IE 5.5, and IE 6.0.28.

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

Column1 Column2
Data 1.1 Data 1.2
Data 2.1 Data 2.2
Data 3.1 Data 3.2

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

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

That's it! One line style rule for the pseudo class hover.

Now for the html:

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

Each cell (TD element) to be affected by the mouseOver (hover) is given 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  

"That's just great, but I have to support IE, and IE only supports hover on links." you say. 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.

Column1 Column2
Data 1.1 Data 1.2
Data 2.1 Data 2.2
Data 3.1 Data 3.2

Okay, you got me. This isn't strictly speaking a CSS solution since it embedded JavaScript into the CSS. But, you don't need script tags and it has the feel of CSS.

I have add three style rules to the CSS used in the example above. There is the class hlt that defines the style for a highlight cell. And then two style rules to toggle the style. Those rules use a faux attribute and IE's proprietary method, expression. 

    <style type="text/css">
        .myClass2:hover,
        .hlt {background-color: yellow; color: black;}
        .myClass2 {
            h: expression(onmouseover=new Function("this.className = 'hlt';"));
        }
        .hlt {
            h: expression(onmouseout=new Function("this.className = 'myClass2';"));
        }
    </style>

In this case, the attribute name has no meaning. The key to this process is the use of the Function constructor that allows this to refer to the cell being affected.

The technique could have been written in many ways. Since more than one property was changed, it seemed easier to toggle the cell's class name, but it could be rewritten to combine the mouseOut and mouseOver in one expression.

The attribute, in this case, only serves to run the expression method, and its name is not significant. The expression method makes an in-line assignment to the cells event handler property just as if it were in the HTML. This is not the same as making the assignment in script. When the assignment is in-line (onMouseOut = "function();") the pronoun this in the function does not refer to the element, but rather it refers to the window. The results of an in-line assignment is: tag.onmouseout = onmouseout () { handler(); }. That is, onmouseout is a method of the element with a call to handler(), an outside global function. Browsers use different names for the function that encapsulates functions assigned in-line: e.g. IE uses anonymous (see the addEvent Script for more details).

By using the Function constructor as, onEvent = new Function ("script");, the default wrapper is replaced with an anonymous function containing the script rather than a call to a function so the script belongs to the object. Consequently, the pronoun this refers to the element as required.

Summary

The 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.