html CSS：表格-带列跨度的行-悬停时更改整行颜色

wnvonmuf 于 2023-01-28 发布在其他

关注(0)|答案(2)|浏览(133)

我希望这不是重复的。我希望整行在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>

Html

来源：https://stackoverflow.com/questions/62170667/css-table-row-with-colspan-change-whole-row-color-on-hover

2条答案

按热度按时间

k2arahey1#

这是一个非常有趣的问题！
你可以用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>

赞(0）回复(0）举报 2023-01-28

ogq8wdun2#

在tbody中 Package 每一行的td元素，并在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>

赞(0）回复(0）举报 2023-01-28

我来回答

html CSS：表格-带列跨度的行-悬停时更改整行颜色

2条答案

相关问题

热门标签

最新问答