我可以使用 `col`、`colgroup` 和 CSS `:hover` 來反白顯示多個表格單元格嗎？

col、colgroups 和 css「hover」偽類別是否可以用於多個單元格？

突出顯示表格行和滑鼠懸停時的列，可以使用 CSS 偽類，如「:hover」。但是，如果您想要突出顯示的不僅僅是單一儲存格，而是整個行或列（包括標題）怎麼辦？

純 CSS 解決方案可以使用 ::before 和 ::after 偽元素來實現此目的。這些元素分別在所選元素之前和之後添加內容。操作方法如下：

1. 建立突出顯示元素：

   • 新增::before 用於行突出顯示，新增::after用於之後突出顯示列相關元素（例如tr、td、th）。
   • 使用絕對定位來允許這些元素擴展到任何地方。
   • 使用左/上負值將它們放置在元素邊界之外（： :before) 或 left/bottom (::after)。
   • 設定較大的寬度/高度以覆蓋整個行/列。

2. 隱藏高亮溢出：

   • 透過在表格上設定overflow:hidden來防止高亮元素表。
   • 這樣在保證高亮的同時保持表格區域乾淨超出單一單元格。

3. 新增行/列選擇器：

   • 僅反白目前行或列，在:hover th（標題）和:hover .row / .col（基於類別的行/列選擇器）上使用::before 和::after 元素。

下面的CSS 程式碼實現了這些原則：

HTML 基本上保持不變，但包括行和列的類別名稱：

此解決方案適用於現代瀏覽器，擴展優雅地對整個行和列進行懸停突出顯示效果。

以上是我可以使用 `col`、`colgroup` 和 CSS `:hover` 來反白顯示多個表格單元格嗎？的詳細內容。更多資訊請關注PHP中文網其他相關文章！