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

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; } ```