How do I change the color of all the elements (onHover) in a <td> even though some are wrapped in <span>?

The implementation is here: http://jsfiddle.net/chp8y/1/

If you hover over the first box, #1, you will see the 'Add Client' change color but the #1 won't. How do I achieve that without using JS ?

If you do a 开发者_如何转开发.sit-in-the-corner:hover it will only work when you hover over the 1. But that's not what I want.

Thoughts?

---

Isn't it a case of changing the last rule to:

table td:hover, table td:hover span {
      color: #aa5650;
}

---

THe style for the class has higher precedence than the style for the tag, so it will override it.

You can add a style that removes the specific setting for the span when the cell is hovered:

table td:hover .sit-in-the-corner {
  color: inherit;
}

http://jsfiddle.net/chp8y/5/

---

Wrap the #s with anchor tags. Drop the color attribute from the .sit-in-the-corner and add that attribute to the anchors. Like this:

HTML:

<span class="sit-in-the-corner"><a class="tile-number">1</a></span>

CSS:

.sit-in-the-corner {
    float: left;
    margin-left: 5px;
    margin-top: -85px;
}

.tile-number {
    color: #556655;
}