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 here

Answer 1

工作 fiddle : 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;
}