Highlight a table cell but without the padding area - html

Question

I have a table column and there are other divs inside of this table column. On mouse hover, I want to highlight all of the content (multiple divs inside the ). I have got this working but here is the problem.
The also has some padding from 4 sides. When I apply the CSS :hover effect, I don't want the padding area to be affected. Rather, everything else inside the div excluding the padding area should be highlighted.
Here is the html
<table id="MyTable">
<tr>
<td style="padding:120px;">
<div>SomeStuff</div>
<div>SomeMoreStuff</div>
</td>
</tr>
</table>
And here is the css
#MyTable td { /* added only for visualisation */
border:1px solid red;
}
#MyTable td:hover {
background: black;
}
JsFiddled here

Answer 1

Working fiddle: http://jsfiddle.net/9zzcY/
Change the HTML to:
<td style="padding:20px;">
<div class="tdContentWrapper">
<div>SomeStuff</div>
<div>SomeMoreStuff</div>
</div>
</td>
Change the CSS to:
#MyTable .tdContentWrapper:hover{
background: black;
}

Answer 2

Change your style declaration to :
td:hover div {

Answer 3

Try this
td:hover div{
//your code here
}

Answer 4

Try inserting an inner markkup to your design witch will not overflow the padding.
<table id="MyTable">
<tr>
<td style="padding:120px;">
<div class="inner-td">
<div>SomeStuff</div>
<div>SomeMoreStuff</div>
</div>
</td>
</tr>
</table>
And apply styling to the 'inner-td' divider on the td:hover
jsFiddle updated here
#MyTable td { /* added only for visualisation */
border:1px solid red;
}
#MyTable td:hover .inner-td {
background: black;
}
Also, Note that :hover on anything other than <a> elements is not fully supported in many older browsers.