Question

I have something like this:

-HTML-

<table>
<tr class="x" onMouseOver="light(this)">
  <td>
    <a href="x">Link</a>
  </td>
  <td>
    Text
  </td>
</tr>
</table>

-CSS-

.x a{
  color: black;
}

-Javascript-

function light(x){
  x.style.color="red";
}

Now, the function works correctly, but my a tag doesn’t changes his color. Is there a way to make Javascript modify the attribute color of the CSS rule .x a?

Answer 1

This might be more suitable:

.x:hover {color:red}
.x:hover a{color:red}

This will override the link’s colour when the row is hovered over, making the onMouseOver function unnecessary.

Note that it may fail in IE6, but personally I’ve never had any problems making things other than links :hover in that browser…