CSS Tips & Tricks

This simple trick to add hover effects for IE in CSS uses IE's proprietary expression function. Microsoft calls this technique Dynamic Properties.

When using expression to change a valid property, say width, list the non IE attribute-value pair first followed by attribute with expression as the value for IE. Otherwise, the value intended for non-IE browsers will override the value from the expression function.

The cells in the following table are highlighted by changing the text and background colors when the mouse pointer moves over the cell.

Let's look at the CSS where the rollover is coded for IE and other browsers.

<-- W3C Compliant Browser -->
<style type="text/css">
    th:hover {
        background-color: #00f;
        color: #fff;
    }
    td {
        background-color: #666;
        color: #fff;
    }
    td:hover {
        background-color: #ff0;
        color: #000;
    }
</style>

The style sheet has a standard style and a hover style for cells (TDs). The headings (THs) only have the hover because they the inherited or default style defined elsewhere when not hovered.

<-- For IE -->
<!--[if lt IE 7]>
    <script type="text/javascript">
        function mOver() {
            switch (this.nodeName.toLowerCase()) {
            case "th":
                this.style.backgroundColor='#00f'; 
                this.style.color='#fff';
                break;
            case "td":
                this.style.backgroundColor='#ff0'; 
                this.style.color='#000'
                break;
            }
        }
        function mOut() {
            switch (this.nodeName.toLowerCase()) {
            case "th":
                this.style.backgroundColor=''; 
                this.style.color='';
                break;
            case "td":
                this.style.backgroundColor='#666'; 
                this.style.color='#fff';
                break;
            }
        }
    </script>
    <style type="text/css">
        td, th {
            h: expression(onmouseover=mOver;);
            m: expression(onmouseout=mOut;);
        }
    </style>
<![endif]-->

For IE, there is a Conditional comment. Within HTML comment tags is the notation, [ if lt IE 7]>, that only IE reads. It tells IE to process the next lines if the browser is IE less than version 7. The special processing ends with <![endif]. Browsers other than IE see this block as a comment and ignore it.

Within the conditional comment are a script and a style element. The script element declares a pair of functions to handle the style changes. The style element has a set of rules IE needs for th and td tags. Each style rule is composed of a made-up attribute having a value of expression(). A real attribute name is not used because, in this example, the return value of expression has no CSS meaning. The attribute's purpose is to cause the expression method to run. expression binds the event handler to elements matching the selector.

The example originally shown on this page—the last example uses this method—made use of the Function constructor. This is okay when there are just a few elements involved, but the Function constructor is not efficent operating much like eval.

<!--[if lt IE 7]>
    <style type="text/css">
        th {
            h: expression(onmouseover=new Function("this.style.backgroundColor='#00f'; this.style.color='#fff';"),
                onmouseout=new Function("this.style.backgroundColor=''; this.style.color='';"));
        }
        td {
            h: expression(onmouseover=new Function("this.style.backgroundColor='#ff0'; this.style.color='#000';"),
                onmouseout=new Function("this.style.backgroundColor='#666'; this.style.color='#fff';"));
        }
    </style>
<![endif]-->

Here is another example

...and the CSS

<style type="text/css">
    .demo2 {
        border: 1px solid #000;
        padding: 2px;
        m: expression(this.onmouseover =  new Function("this.className = 'demo2-hover';"));
    }
    .demo2:hover,
    .demo2-hover {
        border: 1px solid #000;
        padding: 2px;
        color: #00f;
        font-weight: bold;
        font-variant:small-caps;
        m: expression(this.onmouseout = new Function("this.className = 'demo2';"));
    }
</style>

Here the event handler changes the element's class name. Each class style has code that changes to the other class. The regular style has the mouseOver code and the highlight style has the mouseOut code.

This example could use predefined functions instead of the Function constructor.