如何僅使用 CSS 突出顯示懸停時的表格行和列？

使用CSS「Hover」偽類突出顯示懸停時的表格行和列

在此場景中，突出顯示懸停時的表格行和列可以使用像

這樣的語意元素和。讓我們探索一個純CSS 方法：

使用偽元素進行突出顯示

為了突出顯示行和列，我們使用::before 和::after 偽元素元素。這些創建絕對定位的虛擬元素，存在於文檔流之外：

td:hover::before, /* Highlight rows on hover */
.row:hover::before { 
    background-color: #ffa;
    content: '<pre class="brush:php;toolbar:false"><tr class="row">
    <th class="col">50kg</th>
    <th class="col">55kg</th>
    <th class="col">60kg</th>
    <th class="col">65kg</th>
    <th class="col">70kg</th>
</tr>

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

• 懸停的 td 或 .row 會觸發整行的突出顯示。
• td 或 .col懸停會觸發整個列的突出顯示。
• z-index：-1 將反白放置在表格資料單元格下方。
• 位置：絕對和極大的尺寸允許突出顯示超出單元格邊界。
• 溢位：隱藏在表格上隱藏任何溢位。

用於特異性的CSS類別

在HTML中，我們新增像. row 和.col 來明確指定目標元素：

結論

此解決方案純粹使用CSS 突出顯示懸停時的行和列，並且不依賴JavaScript 或jQuery。它適用於所有現代瀏覽器，並在舊版瀏覽器中正常降級。

以上是如何僅使用 CSS 突出顯示懸停時的表格行和列？的詳細內容。更多資訊請關注PHP中文網其他相關文章！