我可以使用 `col`、`colgroup` 和 CSS `:hover` 来突出显示多个表格单元格吗？

col、colgroups 和 css“hover”伪类是否可以用于多个单元格？

突出显示表格行和鼠标悬停时的列，可以使用 CSS 伪类，如“:hover”。但是，如果您想要突出显示的不仅仅是单个单元格，而是整个行或列（包括标题）怎么办？

纯 CSS 解决方案可以使用 ::before 和 ::after 伪元素来实现此目的。这些元素分别在所选元素之前和之后添加内容。操作方法如下：

1. 创建突出显示元素：

   • 添加 ::before 用于行突出显示，添加 ::after 用于在之后突出显示列相关元素（例如 tr、td、th）。
   • 使用绝对定位来允许这些元素元素扩展到任何地方。
   • 使用左/上 (::before) 或左/下 (::after) 的负值将它们放置在元素边界之外。
   • 设置更大的宽度/高度覆盖整个行/列。

2. 隐藏高亮溢出：

   • 通过设置overflow来防止高亮元素溢出表格：隐藏在桌子上。
   • 这可以保持桌子区域干净，同时确保亮点延伸到个人之外

3. 添加行/列选择器：

   • 要仅突出显示当前行或列，请使用： :hover th（标题）和 :hover .row / .col（基于类的选择器）上的 :before 和 ::after 元素行/列）。

下面的 CSS 代码实现了这些原则：

table { overflow: hidden; }
td, th, .row, .col { cursor: pointer; padding: 10px; position: relative; }
td:hover::before, .row:hover::before { background-color: #FFA; content: '<pre class="brush:php;toolbar:false"><table>
  <tr>
    <th></th><th>50kg</th><th>55kg</th><th>60kg</th><th>65kg</th><th>70kg</th>
  </tr>
  <tr class="row">
    <th class="row">160cm</th><td>20</td><td>21</td><td>23</td><td>25</td><td>27</td>
  </tr>
  <tr class="row">
    <th class="row">165cm</th><td>18</td><td>20</td><td>22</td><td>24</td><td>26</td>
  </tr>
</table>

a0'; height: 100%; left: -5000px; position: absolute; top: 0; width: 10000px; z-index: -1; } td:hover::after, .col:hover::after { background-color: #FFA; content: 'a0'; height: 10000px; left: 0; position: absolute; top: -5000px; width: 100%; z-index: -1; }

HTML 基本上保持不变，但包括行和列的类名columns:

此解决方案适用于现代浏览器，将悬停突出显示效果扩展到整个行和列优雅地。

以上是我可以使用 `col`、`colgroup` 和 CSS `:hover` 来突出显示多个表格单元格吗？的详细内容。更多信息请关注PHP中文网其他相关文章！