突出显示表格单元格，但不带填充区域

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

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

Answer 2

将样式声明更改为：

td:hover div {

Answer 3

尝尝这个

td:hover div{
//your code here
}