停止表當鼠標懸停在使用轉換的圖標上時，行高會發生變化

我有一個表中有幾個圖標，當用戶將鼠標懸停在它上面時，圖標大小使用轉換略有變化。但是，這會導致錯誤行爲，因爲表格行反彈並且用戶從一個圖標移動到另一個圖標。有沒有辦法保持懸停時表格行高不發生變化？下面是處理懸停的CSS：停止表當鼠標懸停在使用轉換的圖標上時，行高會發生變化

.IconHover:hover { 
     opacity: 1; 
     -webkit-transform: scale(1.1); 
     transform: scale(1.1); 
     opacity: 1.0; 
     width: 32px; 
     cursor: pointer; 
    }

這是展示行爲的一個例子：

<table> 
<thead> 
    <tr> 
     <th>Actions</th> 
    </tr> 
</thead> 
<tbody> 
    <tr> 
     <td class="customTR"> 
      <img src="http://4.bp.blogspot.com/-F99fDKhNzQw/UCbi0AvmOCI/AAAAAAAAAds/DYettY3Mi70/s1600/email_button.jpg" class="IconHover" width="30" /> 
     </td> 
    </tr> 
</tbody>

我創建了一個this的jsfiddle來說明問題。當用戶超過任何TR圖標時，該行不應改變其高度，而只是ICON。

任何幫助，非常感謝。

來源

2014-06-20 Skindeep2366

您需要增加td的高度，請儘量多謝'40px' – CMPS

只需通過做如下操作，簡單地使<tr>標籤的高度大於1.1 *要轉換對象的高度：<tr style = "height: 50px;">。這解決了你的問題，我希望你可以用這個概念來修復你的表格單元格的其餘部分。問題來自圖像重新縮放。由於您的代碼沒有設置寬度/高度，所以單元格會盡可能小，直到它們需要增長。通過預先設定大小，您可以避免懸停事件的煩人大小調整。您也可能遇到與<td>標籤相同的問題，在這種情況下，您將不得不調整單元格的寬度。請記住，您無法設置<tr>標籤的寬度，您必須設置實際單元格的寬度。

來源

2014-06-20 02:19:51 user3735633

。我認爲這是全部，但不確定（1）是否是問題的根源，以及（2）是否是解決問題的正確方法。 – Skindeep2366

很高興我能幫到你。 – user3735633

停止表當鼠標懸停在使用轉換的圖標上時，行高會發生變化

回答

相關問題