Simple CSS Mouseover Failing

[Zapacoman]

Any idea why? Here's the code...



.td-index {
text-align: center;
vertical-align: middle;
font-family: Arial, Helvetica, sans-serif;
font-size: 10pt;
background: url('images/cssbutton.gif');
color: #000;
m: expression(this.onmouseover = new Function("this.className = 'td-index-hover';"));
}

.td-index:hover,
.td-index-hover {
text-align: center;
vertical-align: middle;
font-family: Arial, Helvetica, sans-serif;
font-size: 10pt;
background: url('images/cssbutton.gif');
color: #fff;
m: expression(this.onmouseout = new Function("this.className = 'td-index';"));
}

.td-index a:link{
background-color: transparent;
color: #fff;
font-weight: bold;
}

.td-index-hover a:link {
background-color: transparent;
color: #fff;
font-weight: bold;
}

[nataliemac]

Try using class names without hyphens.

Although they're allowed and valid, sometimes it causes problems.

[dotancohen]

In what browser are you testing? On what system?

[sutabi]

Internet Explorer only supports :hover :link :visited :active for anchor tags

If you really need the functionality, refer to Javascript - DHTML, with the tag attribute onmouseover="javascript: myHoverFunction();"

[dotancohen]

Actually, It's not even Javascript that IE supports, it's JScript:
http://what-is-what.com/what_is/javascript.html

[ray326]

Another IE alternative: http://www.vladdy.net/demos/iepseudoclassesfix.html

[discus]

Try 'Trifecta button' (http://www.search-this.com/website_design/css_rollover_buttons.aspx). It resolved my problem with css rollovers. ;)