Question

Trying to understand what is going on, maybe someone can explain.
Upon :HOVER I want the entire table content to go transparent. This works for text inside td wrappers. However, text inside a span wrapper doesn’t know it should go transparent.

If I remove color:#897 from the span CSS suddenly it does what I want and all text goes transparent. I did try all sorts of CSS tricks to no avail, the table refuses to recognize span as a descendant of table. What is wrong and how to fix it, if possible.

Answer 1

The reason is that you define color in SPAN as table#Factors span & you define your hover table#Factors:hover So color of SPAN still override you table#Factors:hover class color. Write like this:

table#Factors:hover span{
  color:transparent;
}

Check this http://jsfiddle.net/AyNg3/

Read this for more http://diythemes.com/thesis/css-specificity-thesis/