表格行悬停 - 排除特定单元格？

Question

我创建了一个价格表，当鼠标悬停时会更改行的背景。由于我使用的方式，我遇到了两个问题。

1. 我使用3行跨度来容纳购买按钮，因为我希望它与左侧的列垂直居中对齐，所以必须使用!important才能保持背景在悬停时仍然是白色。已解决。
2. 当你悬停在购买按钮单元格上时，会突出显示第一行。这不是我想要的。我尝试了各种方法并重新排列了内容，但没有任何解决方案，除非删除3行跨度。

jsfiddle

<table>
<tr>
    <th colspan="3">title text</th>
</tr>
<tr>
    <td>amount</td>
    <td class="pricing">price</td>
    <td class="purchase" rowspan="3">purchase button</td>
</tr>
<tr>
    <td>amount</td>
    <td class="pricing">price</td>
</tr>
<tr>
    <td>amount</td>
    <td class="pricing">price</td>
</tr>
</table>


table{
margin:.5em 0 1em 0;
width:100%;
font-size:15px;
}
table th{
padding:0px 0 10px 5px;
}

table td{
padding:2px 5px;
}

table td.purchase{
text-align:right;
width:150px;
vertical-align:middle;
background:#ffffff !important;
}
table td.pricing{
width:130px;
border-left:5px #ffffff solid;
}
table td.details {
padding:0 35px 0 15px;
}

table tr:hover td
{
background-color: #ebf1f6;
}

- user756659

Answer 1

我有一个类似的要求：在鼠标指针悬停在表格行上时，对该行应用背景颜色，但不适用于已经用不同背景颜色突出显示的“选定”行。

使用“pointer-events: none;”正好实现了我想要的效果: JsFiddle

table#CustOrders tbody tr:hover td {
  background-color: LemonChiffon;
}
table#CustOrders tbody tr#selected {
  background-color: Yellow;
  pointer-events: none;
}

- nwsmith

Answer 2

我脑海中想到的第一件事是使用“pointer-events”CSS属性。但我不确定它在这里是否有用。请查看this链接（有一个jsFiddle示例可用）。

此外，考虑使用一些Javascript代码来设置所需的逻辑。我理解你想要仅使用CSS，但在这里使用JS修复可能会很小而明显-为什么不呢？

- chaZm

Answer 3

你可以检查答案

HTML

<table width="100%" border="0" cellspacing="2" cellpadding="2">
  <tr>
    <td colspan="2" scope="row">title text </td>
  </tr>
  <tr>
    <td width="75%" scope="row">
        <table width="100%" border="0" cellspacing="2" cellpadding="2" class="amount_table">
          <tr>
            <td>amount</td>
            <td>price</td>
          </tr>
          <tr>
            <td>amount</td>
            <td>price</td>
          </tr>
          <tr>
            <td>amount</td>
            <td>price</td>
          </tr>
        </table>    
    </td>
    <td width="25%">Purchace</td>
  </tr>
</table>

CSS

.amount_table tr:hover{
  background:gray
}

- softsdev

---

其实那不是答案，因为问题是要找到一个不需要移除三行跨度的解决方案。 - Artur Udod

我什么也没做，但如果我要做的话，似乎需要用一点js。 - Artur Udod

已解决，但不完全符合他的要求。 - user1749185