html - 表のセルを強調表示しますが、パディング領域はありません

Question

テーブル列があり、このテーブル列内に他の div があります。マウスをホバーすると、すべてのコンテンツ ( 内の複数の div) を強調表示したい。私はこれを機能させましたが、ここに問題があります。

また、4 つの側面からいくつかのパディングがあります。CSS :hover 効果を適用するときに、パディング領域に影響を与えたくありません。むしろ、パディング領域を除く div 内の他のすべてを強調表示する必要があります。

ここにhtmlがあります

<table id="MyTable">
    <tr>
        <td style="padding:120px;">
            <div>SomeStuff</div>
            <div>SomeMoreStuff</div>
        </td>
    </tr>
</table>

そして、ここにcssがあります

#MyTable td { /* added only for visualisation */
    border:1px solid red;
}
#MyTable td:hover {
    background: black;
}

ここでJsFiddled

Answer 1

作業フィドル: http://jsfiddle.net/9zzcY/

HTML を次のように変更します。

 <td style="padding:20px;">
   <div class="tdContentWrapper">
    <div>SomeStuff</div>
    <div>SomeMoreStuff</div>
   </div>
 </td>

CSS を次のように変更します。

#MyTable .tdContentWrapper:hover{
  background: black;
}

Answer 2

これを試して

td:hover div{
//your code here
}