Question

我希望整行在悬停时改变背景颜色。 HTML真的很旧，我必须保持原样。 所以我需要在CSS中完成这项工作。没有JavaScript也没有JQuery。一旦我悬停在.GMDataRow td上，我还需要在另一个td的同一元素上触发（更改背景）。 td＆＃39;中的元素顺序相同。

这里是较小的代码框架，因此您可以理解我在说什么：

<table>
 <tr>
  <td>code here</td>
  <td>code here</td>
 </tr>
</table>

这两个tds具有相同的子元素，最重要的是，它们具有相同的<tr class="GMDataRow">。所以我想也许可以用:nth-child()完成。我需要你的建议

JSFiddle：

这是真正的骨架：

<table class="GMMainTable" cellpadding="0" cellspacing="0" border="0">
  <tr>
    <td>
      <div class="GMBodyLeft">
        <table>
          <tr class="GMDataRow" >
            <td>
              xxx
            </td>
          </tr>
          <tr class="GMDataRow">
            <td>
              xxx
            </td>
          </tr>
        </table>
       </div>
    </td>
    <td>
      <div class="GMBodyMid">
        <table>
          <tr class="GMDataRow">
            <td>
              yyy
            </td>
            <td>
              yyy
            </td>
          </tr>
          <tr class="GMDataRow">
            <td>
              yyy
            </td>
            <td>
              yyy
            </td>
          </tr>
        </table>
       </div>
    </td>
  </tr>
</table>

Answer 1

试试这个：

  	.hoverTable{
		width:100%; 
		border-collapse:collapse; 
	}
	.hoverTable td{ 
		padding:7px; border:#4e95f4 1px solid;
	}
	
	.hoverTable tr{
		background: #b8d1f3;
	}
	
    .hoverTable tr:hover {
          background-color: #ffff99;
    }

<table class="hoverTable">
	<tr>
		<td>Text 1A</td><td>Text 1B</td><td>Text 1C</td>
	</tr>
	<tr>
		<td>Text 2A</td><td>Text 2B</td><td>Text 2C</td>
	</tr>
	<tr>
		<td>Text 3A</td><td>Text 3B</td><td>Text 3C</td>
	</tr>
</table>

CSS在悬停时更改多个元素

1 个答案: