Inheritance problem, maybe?

[mgraham]

I have a table in which I want to set the :hover value to give me a reverse video effect using this code:

 

table.checklist-table th:hover,table.checklist-table td:hover { color: white; background-color: rgba(0,0,256,1);}

The weird thing is that the background colour changes but the foreground text colour does not. Instead it keeps the general body text colour specified here:

 

body { color: #222; height: auto; height: 100%; line-height: 1.3em; min-height: 100%;}

I really don't understand why it's using the inherited color when the rule for the table is so very much more particular, and it *is* changing the background so I know the rule is triggering, it's just not using the "color: white".

 

Any thoughts?

 

Mike

[Ingolme]

There probably are other selectors in the document interfering. Without seeing all the code I won't be able to know.

 

Check for any other rules setting the color of a <td> or <th> element, or a rule changing the color of a different element that's inside a table cell.

[kelly2marie]

You can use the !important declaration for the color property.

 

color:white!important;

 

That will force the text to be white regardless of any inheritance or any other reason. But, use this as a last ditch effort. In your situation, it may be the solution.

[dsonesuk]

If you use firebug, and inspect the element it will show you selectors in order of precedence from top to bottom that are targeting that element.