Question

我制作了一张定价表，可以在悬停时更改行的背景。由于我使用它的方式，我遇到了两个问题。

我使用3行跨度来保持购买按钮，因为我希望它在中心垂直对齐，左边有列。我必须使用！important来保持背景白色翻转。固定的。
当您翻转购买按钮单元格时，它突出显示第一行。这是我不想要的。我已经尝试了各种各样的事情并重新安排了事情，如果不删除3行范围，就无法提出任何解决方案。

<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

我有一个类似的要求：在桌面行上应用背景颜色，当我用鼠标指针悬停在行上时，除了选择＆＃39;行，已经以不同的背景颜色突出显示。

使用＆＃39;指针事件：无;＆＃39;实现了我想要的：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属性。但我不确定它在这里是否有用。检查this链接（有可用的jsFiddle示例）

还要考虑使用一些javascript代码来设置所需的逻辑。我知道你只想使用css，但是js fix在这里可以很小很明显 - 为什么不呢？

Answer 3

您可以查看Answer

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

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

3 个答案: