Q:

hover is not working on table td

I have 5 td's in a table and, when I hover on it, the background image should change.
Currently, if I hover on 1st or on the last td, the background image change but I don't know why this hover effect is not working for other td's.

Here's the relevant HTML code:
<div id="main" style="border-bottom-right-radius:0px;border-bottom-left-radius: 0px;" class="shell">
<table border="1" height="100%" width="100%" class="addtasks">
    <tr>
        <td width="20%" class="inboxtasks" align="center" onclick="alert('Comming soon. I am working on this...');"> Past days<br/> <div id="past_days_itemdiv"> 10 </div></td>
        <td width="20%" class="inboxtasks" align="center" onclick="alert('Comming soon. I am working on this...');" > Yesterday<br/> <div id="yesterday_itemdiv"> 10 </div></td>
        <td width="20%" class="inboxtasks" align="center" onclick="alert('Comming soon. I am working on this...');"> Today<br/> <div id="today_itemdiv"> 10 </div></td>
        <td width="20%" class="inboxtasks" align="center" onclick="alert('Comming soon. I am working on this...');"> Tomorrow<br/> <div id="tomarrow_itemdiv"> 10 </div></td>
        <td width="20%" class="inboxtasks" align="center" onclick="alert('Comming soon. I am working on this...');"> Next days<br/> <div id="next_days_itemdiv"> 10 </div></td>
    </tr>
</table>

And here's the relevant CSS code:
.inboxtasks:hover
{   cursor: pointer;
    background-color: whitesmoke;
    font-size: 14px;
}
.inboxtasks{
    height:80px; 
}

Update:
In a simple html page it's working, but my application is big, with lots of html code, then I don't know what's the reason for this problem.
Full code (really big) : http://jsfiddle.net/Rd2v4/

A:

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

