CODEWITHSUNDEEP
htmlcsshoverhtml-table
frrlod
frrlod

Reputation: 6685

TD Hover will not work

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?

Upvotes: 4

Views: 23796

Answers (3)

Kenneth
Kenneth

Reputation: 28737

You need to remove the space before :hover:

td:hover {
    background-color: red;
}

Upvotes: 6

MMM
MMM

Reputation: 7310

: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.

Upvotes: 12

Adrift
Adrift

Reputation: 59779

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

td:hover will work

http://jsfiddle.net/xwYTa/

Upvotes: 2

Related Questions