如何在表格中仅对某些单元格使用CSS hover效果?
我可以在不需要应用它的单元格上关闭它吗?
我正在使用以下代码:
td:hover {
border-style:dotted;
border-color:#F60;
border-width:medium;
border-left-style:dotted;
border-right-style:dotted;
}
但我需要它只应用于特定的单元格
不要为所有单元格指定样式,而是创建一个类并仅将其应用于您想要样式的单元格。将您的CSS更新为以下内容:
.myclass:hover {
border-style:dotted;
border-color:#F60;
border-width:medium;
border-left-style:dotted;
border-right-style:dotted;
}
<table>
<tr>
<td class="myclass">Cell 1 with special hoover</td>
<td>Cell 2</td>
<td>Cell 3</td>
</tr>
</table>
<td>
标签在 HTML 中支持全局属性,因此您可以为要悬停的每个表格单元格添加一个类到您的代码中。
...
<td class="cell-hover">Table Cell Data</td>
...
td:hover {
border-style:dotted;
border-color:#F60;
border-width:medium;
border-left-style:dotted;
border-right-style:dotted;
}
在 CSS 中使用 .
,您可以选择仅具有前置类名的元素