Question

如下面的代码片段所示，我在td中有span元素。同样如CSS部分所述，我已经为DOM使用了悬停属性，其中class =＆＃34; open＆＃34;。问题是我想让整个td元素在悬停时突出显示，而不仅仅是span元素。我想如果在css中有一些亲切的父选择器，但不幸的是它没有。有没有办法得到理想的结果。

提前很多!!!!

<tr>                
    <td><span class="open">07</span></td>
    <td><span class="open">08</span></td>
    <td><span class="open">09</span></td>
    <td><span class="close">10</span></td>
    <td><span class="close">11</span></td>
</tr>

CSS：

.open:hover {
background-color: #42C0FB;
color: white;
cursor: pointer;
}

Answer 1

选项1，将范围设置为td宽度的100％，或者如果不希望这样，则选项2将改为定位td元素。

选项1
CSS：

.open:hover {
background-color: #42C0FB;
color: white;
cursor: pointer;
width: 100%;
}

选项2
HTML：

<tr>                
    <td class="open"><span>07</span></td>
    <td class="open"><span>08</span></td>
    <td class="open"><span>09</span></td>
    <td class="close"><span>10</span></td>
    <td class="close"><span>11</span></td>
</tr>

Answer 2

简短回答：没有父选择器，你不能创建任何。

您的案例中的解决方案：

1）将span声明为inline-block并将大小设置为td-element的大小

2）在你的css规则中使用td而不是span元素

Answer 3

.open {
display:inline-block;
}

Answer 4

如果要在将元素悬停在其中时突出显示容器（在OP的示例中，将鼠标悬停在跨越内部时突出显示td），您可以使用标签和输入来完成此操作。

在表格之前放置一堆隐藏的输入，并将标签放在表格单元格中。然后，您可以定位整个单元格，因为输入在此之前，即使标签位于内部。

table {border:1px outset;}
td {border:1px inset; padding:1em;}
label {cursor:pointer; border:1px solid #ddd;}
input {display:none;}
#input07:hover ~ table td:first-child, 
#input08:hover ~ table td:nth-child(2), 
#input09:hover ~ table td:nth-child(3) {
  background-color: #42C0FB;
  color: white;
  cursor: pointer;
}

<input id="input07"><input id="input08"><input id="input09"><input id="input10"><input id="input11">
<table>
  <tr>
    <td><label for="input07" class="open">07</label></td>
    <td><label for="input08" class="open">08</label></td>
    <td><label for="input09" class="open">09</label></td>
    <td><label for="input10" class="close">10</label></td>
    <td><label for="input11" class="close">11</label></td>
  </tr>
</table>

如何实现：css中的父选择器

4 个答案: