如何將 CSS 懸停效果擴展到表格中的單元格邊界之外？

將CSS懸停效果擴展到單元格邊界之外：突出顯示列、列組中的表格

以表格形式顯示數據時，突出顯示懸停時的特定單元格通常是可取的。但是，突出顯示與懸停單元格相交的行和列可以進一步提高資料清晰度。當表格跨越多個測量單位時，這特別有用。

純 CSS 解決方案

幸運的是，使用純 CSS 可以實現這種擴展的突出顯示效果。透過利用偽元素（::before、::after）、z-index 操作和絕對定位，我們可以創建超出單元格邊界的突出顯示疊加。

實作

以下CSS程式碼說明了實作：

table {
    overflow: hidden;
    z-index: 1;
}

td, th {
    cursor: pointer;
    padding: 10px;
    position: relative;
}

td:hover::before,
.row:hover::before { 
    background-color: #ffa;
    content: '<pre class="brush:php;toolbar:false"><table border="1">
    <tr>
        <th></th>
        <th>

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結構

對應的HTML結構包括額外的類別.row和.col用於行和列標題分別為：

範例輸出

將滑鼠懸停在單元格上現在會突出顯示相應的行和列：

[圖像突出顯示行和列的表格]

這種方法可以在現代瀏覽器中無縫運行，並在舊版瀏覽器中優雅地降級。

以上是如何將 CSS 懸停效果擴展到表格中的單元格邊界之外？的詳細內容。更多資訊請關注PHP中文網其他相關文章！