CSS on hover effect on a <td> does not wok properly if <td> has multiple <div>s inside it

Question

I have a table column with multiple divs inside it to fit in an icon, title and description text. Also, on mouse over, I need to provide a highlight /overlay effect that highlights all of the column including the divs image, title and description text.

Here is the HTML

 <td>
   <div style="display:inline-block; border:1px solid red">left</div>
    <div style="display:inline-block">
    <div style="display:inline-block; border:1px solid blue">top left</div>
    <div style="display:inline-block; border:1px solid green">top right</div>
    <div>bottom </div>  
   </div>
 </td>

When I use a simple CSS effect to change the background of the column as below, the effect shows up only on individual divs but not the entire table column. I want that if any of the divs get a mouse over, all of the column should be highlighted.

CSS code

#MyTable td :hover {
background: #cccccc;
}

Solution 1

you have an extra space before :hover : try with

#MyTable td:hover { 
   background-color: #ccc;
}

Solution 2

It seems you need to delete the space before hover

#MyTable td:hover {
background: #cccccc;
}

See fiddle here: http://jsfiddle.net/wooder89/eUCG5/

Solution 3

#MyTable td:hover {
  background: #cccccc;
}

i think problem is you should use ":" right after "td"