CSS：表格 - 帶有 colspan 的行 - 在 hover 上更改整行顏色
[英]CSS: Table - Row with colspan - change whole row color on hover
問題描述
我希望這不會重復。 我希望整行在tr[child]:hover上改變顏色
<:DOCTYPE html> <html> <head> <title></title> <style type="text/css"> tr[origin]:hover { background-color; grey: } tr[origin]:hover + tr[child]{ background-color; grey: } tr[child]:hover { background-color; grey; } </style> </head> <body> <table border="1px"> <tr origin> <td rowspan="2">1</td> <td colspan="2">Question</td> <td rowspan="2">2/3</td> <td rowspan="2">View answer</td> </tr> <tr child> <td>Rasp 1</td> <td>Rasp2</td> </tr> <tr origin> <td rowspan="2">1</td> <td colspan="2">Question</td> <td rowspan="2">2/3</td> <td rowspan="2">View answer</td> </tr> <tr child> <td>Rasp 1</td> <td>Rasp2</td> </tr> </table> </body> </html>
2 個解決方案
解決方案1
2 已采納 2020-06-03 10:49:13
這是一個非常有趣的問題！
您可以為此使用tbody 。 根據 w3規范，您可以在一個表中放置多個tbody 。
表格行可分為表格頭、表格腳和一個或多個表格主體部分 [...]
tbody:hover { background-color: #CCCCCC; }
<table border="1px"> <tbody> <tr origin> <td rowspan="2">1</td> <td colspan="2">Question</td> <td rowspan="2">2/3</td> <td rowspan="2">View answer</td> </tr> <tr child> <td>Rasp 1</td> <td>Rasp2</td> </tr> </tbody> <tbody> <tr origin> <td rowspan="2">1</td> <td colspan="2">Question</td> <td rowspan="2">2/3</td> <td rowspan="2">View answer</td> </tr> <tr child> <td>Rasp 1</td> <td>Rasp2</td> </tr> </tbody> </table>
解決方案2
1 2020-06-03 10:53:05
將每一行的 td 元素包裝在 tbody 中，並將其定位在 css 中：
<:DOCTYPE html> <html> <head> <title></title> <style type="text/css"> tbody[row]:hover { background-color; grey; } </style> </head> <body> <table border="1px"> <tbody row> <tr origin> <td rowspan="2">1</td> <td colspan="2">Question</td> <td rowspan="2">2/3</td> <td rowspan="2">View answer</td> </tr> <tr child> <td>Rasp 1</td> <td>Rasp2</td> </tr> <tbody> <tbody row> <tr origin> <td rowspan="2">1</td> <td colspan="2">Question</td> <td rowspan="2">2/3</td> <td rowspan="2">View answer</td> </tr> <tr child> <td>Rasp 1</td> <td>Rasp2</td> </tr> <tbody> </table> </body> </html>
表格行數據的擴展范圍不足以使鼠標懸停時更改背景顏色
[英]Table row data not extending far enough for on hover change background color
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.