Question

我有一个桌子，里面有几个图标，当用户将鼠标悬停在它们上面时，图标大小会稍微改变一下。然而，这导致了错误的行为，因为表行反弹并且用户从一个图标移动到下一个图标。有没有办法防止表格行高度在悬停时改变？下面是处理悬停的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。

非常感谢任何帮助。

Answer 1

通过执行以下操作，只需使<tr>标记的高度大于1.1 *要转换的对象的高度：<tr style = "height: 50px;">。这解决了小提琴中的问题，我希望您可以使用此概念来修复其余的表格单元格。问题源于图像重新缩放。由于标签上没有设置的宽度/高度，因此单元格必须尽可能小，直到需要增长。通过预先设置大小，您可以避免对悬停事件进行恼人的调整。您可能还会遇到与<td>标签相同的问题，在这种情况下，您必须调整单元格的宽度。请记住，您无法设置<tr>标记的宽度，您必须设置实际单元格的宽度。

将鼠标悬停在使用转换的图标上时，停止更改表行高度

1 个答案: