尝试让悬停和CSS正确高亮

Question

我在 CSS 突出显示表格中正确的行以及当鼠标悬停在这些行上时允许突出显示时遇到问题。

serverA 和 ServerR 的行看起来像我想要的。

但是，如果服务器名称跨越 1 行以上，我就会遇到突出显示问题。 对于服务器 X，我希望“Acct X2”和“7 个用户”（两行，不仅仅是 AcctX1）也具有备用背景。

对于serverB，我希望它没有背景。

对于 serverC，我还希望所有单元格都具有不同的背景颜色。

以 Excel 中的视觉效果为例。

第二部分

此外，当我将鼠标悬停在上面时，它并没有突出显示所有内容。

我想要的是，当您将鼠标悬停在 ServerA 的任何部分时，整个组（服务器 A、Acct A1、9 个用户）都会突出显示。 目前这有效。

但是，如果我将鼠标放在 serverX、ServerB 或 serverC 上，它只会更改服务器单元格和第一行单元格的颜色（对于 serverX，这将是 x1, 9 个用户）

table {
            border: thin solid #000000;
            min-width: 100px;
            width: 70%;
            margin: auto;
            text-align: left;
            padding: 0px;
        }

.abc:hover
{
    background-color: coral;
}

tr:nth-child(even) {background-color: #a2a2a2;}
}

<h2>Test Highlight</h2>

<table>
  <tr>
    <th>Server</th>
    <th>Group</th>
    <th>Users</th>
  </tr>
<!-- row 1 -->
  <tr class='abc'>
    <td rowspan="1">ServerA</td>
    <td>Acct A1</td><td>9 users</td></tr>
  </tr>
<!-- row 2 -->  
  <tr class='abc'>
    <td rowspan="1">ServerR</td>
    <td>Acct R1</td><td>9 users</td></tr>
  </tr>
<!-- row 3 & 4 -->  
  <tr class='abc'>
    <td rowspan="2">ServerX</td>
    <td>Acct X1</td><td>9 users</td></tr>
    <td>Acct X2</td><td>7 users</td></tr>
  </tr>
<!-- row 5 & 6 -->  
  <tr class='abc'>
    <td rowspan="2">ServerB</td>
    <td>Acct B1</td><td>9 users</td></tr>
    <td>Acct B2</td><td>17 users</td></tr>
</tr>
<!-- row 7,8, & 9 -->  
<tr class='abc'>
<td rowspan="3">ServerC</td>
        <td>Acct C1</td><td>27 users</td></tr>
        <td>Acct C2</td><td>7 users</td></tr>
        <td>Acct C3</td><td>7 users</td></tr>
</tr></td>
</table>
<hr>

我对 CSS 的要求是否太多了？我需要使用 JavaScript 来突出显示吗？如果需要，我可以对 HTML 页面进行任何更改。

Answer 1

问题在于 HTML 无效，因此它会为这些双行生成单独的

<tr>

。在此示例中，我编辑了它的第一个实例以显示差异。通过添加单独行的结构并为其指定关联的类名，您可以告诉它在悬停双单元格时突出显示两行，如下所示添加

.abc:hover + .abc_second

规则

table {
            border: thin solid #000000;
            min-width: 100px;
            width: 70%;
            margin: auto;
            text-align: left;
            padding: 0px;
        }

.abc:hover,
.abc:hover + .abc_second
{
    background-color: coral;
}

tr:nth-child(even) {background-color: #a2a2a2;}
}

<h2>Test Highlight</h2>

<table>
  <tr>
    <th>Server</th>
    <th>Group</th>
    <th>Users</th>
  </tr>
<!-- row 1 -->
  <tr class='abc'>
    <td rowspan="1">ServerA</td>
    <td>Acct A1</td><td>9 users</td></tr>
  </tr>
<!-- row 2 -->  
  <tr class='abc'>
    <td rowspan="1">ServerR</td>
    <td>Acct R1</td><td>9 users</td></tr>
  </tr>
<!-- row 3 & 4 -->  
  <tr class='abc'>
    <td rowspan="2">ServerX</td>
    <td>Acct X1</td><td>9 users</td></tr>
   <tr class='abc_second'><td>Acct X2</td><td>7 users</td></tr>
<!-- row 5 & 6 -->  
  <tr class='abc'>
    <td rowspan="2">ServerB</td>
    <td>Acct B1</td><td>9 users</td></tr>
    <td>Acct B2</td><td>17 users</td></tr>
</tr>
<!-- row 7,8, & 9 -->  
<tr class='abc'>
<td rowspan="3">ServerC</td>
        <td>Acct C1</td><td>27 users</td></tr>
        <td>Acct C2</td><td>7 users</td></tr>
        <td>Acct C3</td><td>7 users</td></tr>
</tr></td>
</table>
<hr>