如何在表格中仅对某些单元格使用CSS hover？

Question

如何在表格中仅对某些单元格使用CSS hover效果？
我可以在不需要应用它的单元格上关闭它吗？ 我正在使用以下代码：

td:hover {
    border-style:dotted;
    border-color:#F60;
    border-width:medium;
    border-left-style:dotted;
    border-right-style:dotted;

}

但我需要它只应用于特定的单元格

- honeycomb13

---

这些“一些单元格”是否有模式，还是随机的单元格？ - Rusty

Answer 1

不要为所有单元格指定样式，而是创建一个类并仅将其应用于您想要样式的单元格。将您的CSS更新为以下内容：

.myclass:hover {
    border-style:dotted;
    border-color:#F60;
    border-width:medium;
    border-left-style:dotted;
    border-right-style:dotted;

}

然后您可以在HTML代码中像这样做：

<table>
  <tr>
    <td class="myclass">Cell 1 with special hoover</td>
    <td>Cell 2</td>     
    <td>Cell 3</td>
  </tr>
</table>

- nibarius

Answer 2

<td> 标签在 HTML 中支持全局属性，因此您可以为要悬停的每个表格单元格添加一个类到您的代码中。

...
<td class="cell-hover">Table Cell Data</td>
...

修改您的 CSS 选择器，以仅选择具有“cell-hover”类的 td 单元格。

td:hover {
   border-style:dotted;
   border-color:#F60;
   border-width:medium;
   border-left-style:dotted;
   border-right-style:dotted;
}

在 CSS 中使用 .，您可以选择仅具有前置类名的元素

- Conner

---

@honeycomb13 如果这个答案解决了你的问题，请接受它，并可能点赞。 - nibarius