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

我做了一个定价表，它会在盘旋时改变行的背景。由于我使用它的方式，我遇到了两个问题。表格悬停 - 排除特定单元格？

有一个3行跨度我用来持有购买按钮，因为我希望它的垂直对齐在左边的列的中心。我不得不使用！重要的是保持背景在翻滚时变白。固定。
当您翻转购买按钮单元格时，它将突出显示第一行。这是我不想要的。我已经尝试了各种各样的东西并重新安排了一些东西，如果不移除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; 
}

来源

2013-01-09 user756659

-1

，您可以检查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 
}

来源

2013-01-09 07:37:07 softsdev

嗯，实际上这不是答案，因为问题是找到一个解决方案而不删除3行跨度。 –

你做了什么来解决 – softsdev

我什么都没做，但如果我愿意的话，似乎我不得不使用一些js。 –

是来到我的脑海里的第一件事是用 “指针事件” CSS属性。但我不确定它在这里是否有用。检查this链接（有一个jsFiddle示例可用）

也想到使用一些JavaScript代码来设置您需要的逻辑。我知道你只想使用CSS，但js修复在这里可能很小很明显 - 那为什么不呢？

来源

2013-01-09 07:26:13 chaZm

我也有类似的要求：适用于表行背景颜色，我徘徊用鼠标指针在行的上方，除了在“selected”行上，这是alrea dy以不同的背景颜色突出显示。

使用'pointer-events：none;'实现了我想要的：JsFiddle

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

来源

2017-11-03 16:23:45 nwsmith

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

回答

相关问题