我制作了一个价格表，当鼠标悬停时将改变行背景。由于我使用它的方式，我遇到了两个问题
有一个3行跨度，我用来保持购买按钮，因为我希望它垂直对齐在中心与列的左边。我必须使用!important来保持背景在滚动时为白色。固定的。
当您滚动购买按钮单元格时，它突出显示第一行。这是我不想要的。我试过各种各样的东西，重新安排的东西，也不能拿出任何解决方案，不删除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;
}
我有一个类似的需求:在表格的行上应用背景色，当我用鼠标指针悬停在行上时，除了'selected'行，它已经用不同的背景色突出显示。
使用'pointer-events: none;'达到了我想要的效果:JsFiddle
table#CustOrders tbody tr:hover td {
background-color: LemonChiffon;
}
table#CustOrders tbody tr#selected {
background-color: Yellow;
pointer-events: none;
}
我想到的第一件事是使用"pointer-events" css属性。但我不确定它在这里是否有用。检查此链接(有一个jsFiddle示例可用)
也考虑使用一些javascript代码来设置你需要的逻辑。我明白你想只用css，但js的修复可以相当小，明显在这里-所以为什么不呢?
您可以查看答案