Question

我有一张桌子，我希望每隔一个细胞盘旋，或者更好地说出每个细胞都有内容。我希望空单元格.table_pascals_triangle td:empty悬浮效果消失。

在我的片段和jsfiddle中，它的工作方式与我想要的一样，但在我的页面上，我也看到了空单元格上的悬停效果。

＆＃13;

   .table_pascals_triangle
{empty-cells:hide;
}
.table_pascals_triangle tr.even:hover td:nth-of-type(even){
  color:black;
  background: #E0E0E0;
}
.table_pascals_triangle tr.odd:hover td:nth-of-type(odd) {
  color:black;
  background: #E0E0E0;
}
.table_pascals_triangle td:empty {
  background: white;
/* this cells shouldn't use the :hover Selector */
}

＆＃13;

<table class="table_pascals_triangle">
<tr class="odd">
  <td></td>
  <td></td>
  <td></td>
  <td></td>
  <td></td>
  <td></td>
  <td>1</td>
  <td></td>
  <td></td>
  <td></td>
  <td></td>
  <td></td>
  <td></td>
</tr>
<tr class="even">
  <td></td>
  <td></td>
  <td></td>
  <td></td>
  <td></td>
  <td>1</td>
  <td></td>
  <td>1</td>
  <td></td>
  <td></td>
  <td></td>
  <td></td>
  <td></td>
</tr>
<tr class="odd">
  <td></td>
  <td></td>
  <td></td>
  <td></td>
  <td>1</td>
  <td></td>
  <td>2</td>
  <td></td>
  <td class="dreieckzahl">1</td>
  <td></td>
  <td></td>
  <td></td>
  <td></td>
</tr>
<tr class="even">
  <td></td>
  <td></td>
  <td></td>
  <td>1</td>
  <td></td>
  <td>3</td>
  <td></td>
  <td class="dreieckzahl">3</td>
  <td></td>
  <td class="tetraeder">1</td>
  <td></td>
  <td></td>
  <td></td>
</tr>
</table>

＆＃13;

Answer 1

诀窍是将:not(:empty)附加到执行悬停的选择器，这样您就不需要新的选择器来撤消第一个选择器的操作。

问题是一个特殊问题：最底层的选择器不够强大，无法覆盖上述选择。

   .table_pascals_triangle
{empty-cells:hide;
}
.table_pascals_triangle tr.even:hover td:nth-of-type(even):not(:empty) {
  color:black;
  background: #E0E0E0;
}
.table_pascals_triangle tr.odd:hover td:nth-of-type(odd):not(:empty) {
  color:black;
  background: #E0E0E0;
}

<table class="table_pascals_triangle">
<tr class="odd">
  <td></td>
  <td></td>
  <td></td>
  <td></td>
  <td></td>
  <td></td>
  <td>1</td>
  <td></td>
  <td></td>
  <td></td>
  <td></td>
  <td></td>
  <td></td>
</tr>
<tr class="even">
  <td></td>
  <td></td>
  <td></td>
  <td></td>
  <td></td>
  <td>1</td>
  <td></td>
  <td>1</td>
  <td></td>
  <td></td>
  <td></td>
  <td></td>
  <td></td>
</tr>
<tr class="odd">
  <td></td>
  <td></td>
  <td></td>
  <td></td>
  <td>1</td>
  <td></td>
  <td>2</td>
  <td></td>
  <td class="dreieckzahl">1</td>
  <td></td>
  <td></td>
  <td></td>
  <td></td>
</tr>
<tr class="even">
  <td></td>
  <td></td>
  <td></td>
  <td>1</td>
  <td></td>
  <td>3</td>
  <td></td>
  <td class="dreieckzahl">3</td>
  <td></td>
  <td class="tetraeder">1</td>
  <td></td>
  <td></td>
  <td></td>
</tr>
</table>

Answer 2

您可以使用

background:white!important;

悬停将超过默认背景，除非它很重要。你克服了也告诉霍夫不要寻找空单元

td:hover td:not(:empty)

我认为第二个选项看起来更好，但那取决于你

CSS：悬停空单元格：空选择器

2 个答案: