Question

我有一个表列，此表列中还有其他div。鼠标悬停时，我想突出显示所有内容（内部有多个div）。我有这个工作，但这是问题。

4面也有一些衬垫。当我应用CSS：悬停效果时，我不希望填充区域受到影响。相反，应突出显示除填充区域之外的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

工作小提琴： 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
}

Answer 4

尝试在设计中插入一个内部markkup，不会溢出填充。

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

将样式应用于'inner-td'分隔符 on td：hover

jsFiddle updated here

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

此外，请注意：在许多旧版浏览器中，不支持<a>元素以外的其他任何内容 。

突出显示表格单元格但没有填充区域

4 个答案: