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

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

Answer 1

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

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

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

Answer 2

我首先想到的是使用“ pointer-events ”css 属性。但我不确定它在这里是否有用。检查此链接（有一个可用的 jsFiddle 示例）

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

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
}