Table row hovering - exclude specific cell?

Question

I made a pricing table that will change the background of the row when hovered. Due to the way I am using it I ran into two problems.

1. there is a 3 row span I am using to hold the purchase button as I want it vertically aligned in the center with the columns to its left. I had to use !important to keep the background white on rollover. Fixed.

2. when you rollover the purchase button cell its highlights the first row. This is what I do not want. I've tried all sorts of things and rearranged things as well and can't come up with any solution without removing the 3 row span.

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

I had a similar requirement: apply a background color on a table row, as I hovered over the row with the mouse pointer, except on a 'selected' row, that was already highlighted in a different background color.

Using 'pointer-events: none;' achieved exactly what i wanted: JsFiddle

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