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

我制作了一个定价表，当鼠标悬停时，它将改变行的背景。由于我使用它的方式，我遇到了两个问题

有一个3行的跨度，我用以举行购买按钮，因为我想它垂直对齐的中心与列的左侧。我必须使用！滚动时保持背景为白色很重要。固定的

滚动“购买”按钮时，其单元格将高亮显示第一行。这是我不想要的。我已经尝试了各种各样的方法，也重新安排了一些方法，但如果不删除3行跨度，就无法找到任何解决方案

标题文本
数量
价格
购买按钮
数量
价格
数量
价格
桌子{
边距：5em 0 1em 0；
宽度：100%；
字体大小：15px；
}
表th{
填充：0px 0 10px 5px；
}
表td{
填充物：2px 5px；
}
表td.采购{
文本对齐：右对齐；
宽度：150px；
垂直对齐：中间对齐；
背景：#ffffff！重要；
}
表td.价格{
宽度：130px；
左边框：5px#ffffff实心；
}
表td.1详细信息{
填充：0 35px 0 15px；
}
表tr：悬停td
{
背景色：#ebf1f6；
}

我想到的第一件事是使用“指针事件”css属性。但我不确定它在这里是否有用。检查链接（有一个JSFIDLE示例可用）

还可以考虑使用一些javascript代码来设置所需的逻辑。我知道您只想使用css，但是js补丁在这里可能非常小而且明显，所以为什么不呢？

您可以检查一下

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>

---

我有一个类似的要求：当我用鼠标指针悬停在表格行上时，在表格行上应用背景色，但“选定”行除外，该行已以不同的背景色高亮显示

使用“指针事件：无；”完全实现了我想要的：

---

事实上，这不是答案，因为问题是在不删除3行跨度的情况下找到一个解决方案。我什么也没做，但如果我愿意，似乎我不得不使用一点js。已解决但不完全符合他的要求

<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>

.amount_table tr:hover{
  background:gray
}

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