2

我有一个表格列，并且该表格列内还有其他 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 在这里

4

4 回答 4

2

工作小提琴：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;
}
于 2013-04-12T17:02:46.547 回答
1

尝试在您的设计中插入一个内部标记不会溢出填充。

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

并将样式应用于td:hover上的“inner-td”分隔线

jsFiddle 在这里更新

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

另外，请注意，许多旧浏览器不完全支持:hover 在元素以外的任何内容上。<a>

于 2013-04-12T17:18:44.237 回答
1

尝试这个

td:hover div{
//your code here
}
于 2013-04-12T17:01:35.440 回答
1

将您的样式声明更改为：

td:hover div {
于 2013-04-12T17:00:51.837 回答