TD Hover will not work

Question

I have the following CSS:

 td: hover {
 background-color:red;
 }
 td {
 cursor: pointer;
 background-color: rgb(150,150,150);
 }

and my HTML is just:

<table>
<tr><td> </td></tr>
</table>

I can't get the hover to work. Why is that?

Answer 1

:hover is a pseudo-selector, and everything beginning with : is such (e.g. :active, :before etc.).

This can be confused with specifying values:

something: value;

So you need to think about pseudo-selectors as separate objects, not a value.

That's why you need to fix your td: hover so it looks like td:hover.

Note that if you put a space after td like so:

td :hover { ...

This is equal to:

td: *:hover { ...

and therefore will select all items descending from td and apply a style on hover to them (see this example).

Remember, spaces have a meaning in CSS.

Answer 2

You need to remove the space before :hover:

td:hover {
 background-color: red;
}

Answer 3

You just need to remove the space between td :hover as the <td> has no descendants ..

td:hover will work

http://jsfiddle.net/xwYTa/