transform: scale() 悬停模糊答案

【问题标题】：transform: scale() Hover Blurtransform: scale() 悬停模糊
【发布时间】：2018-07-18 19:47:39
【问题描述】：

似乎在使用“transform: scale()”时会暂时模糊图像和文本。 My fiddle 和代码：

HTML：

<table>
  <tbody>
    <tr>
      <!-- The current Image Sources are just PLACEHOLDERS. It is not the final img sources path. -->
      <td>
        <img src="http://opensource.org/files/osi_keyhole_100X100_90ppi.png" width="100px" height="100px">
        <div class="rndSpacing1">The Test</div>
      </td>
      <td>
        <img src="http://opensource.org/files/osi_keyhole_100X100_90ppi.png" width="100px" height="100px">
        <div class="rndSpacing2">Testtest Testtesttesttest</div>
      </td>a
      <td>
        <img src="http://opensource.org/files/osi_keyhole_100X100_90ppi.png" width="100px" height="100px">
        <div class="rndSpacing1">TESt</div>
      </td>
      <td>
        <img src="http://opensource.org/files/osi_keyhole_100X100_90ppi.png" width="100px" height="100px">
        <div class="rndSpacing1">Testt TesttTest</div>
      </td>
    </tr>
    <tr>
      <td>
        <img src="http://opensource.org/files/osi_keyhole_100X100_90ppi.png" width="100px" height="100px">
        <div class="rndSpacing2">TestTest Testtest</div>
      </td>
      <td>
        <img src="http://opensource.org/files/osi_keyhole_100X100_90ppi.png" width="100px" height="100px">
        <div class="rndSpacing2">Test Testtest tests</div>
      </td>
      <td>
        <img src="http://opensource.org/files/osi_keyhole_100X100_90ppi.png" width="100px" height="100px">
        <div class="rndSpacing2">testtest testtest</div>
      </td>
      <td>
        <img src="http://opensource.org/files/osi_keyhole_100X100_90ppi.png" width="100px" height="100px">
        <div class="rndSpacing1">Testtesttesttest</div>
      </td>
    </tr>
  </tbody>
</table>

CSS：

    table, th, td {
    border: 1px solid #8a9398;
    border-collapse: collapse;
    box-shadow: inset 1px 1px 0px 1px white;
    table-layout: fixed;
}
td {
  text-align: center;
  width: 148px;
  height: 180px;
  color: #48515b;
  cursor: pointer;
}
td:hover{
  -ms-transition-duration: 0.2s;
        -ms-transform: scale(1.1);
    -webkit-transition-duration: 0.2s;
        -webkit-transform: scale(1.1);
  box-shadow: 0 0 0 0;
}
td:active {
  -ms-transition-duration: 0.1s;
        -ms-transform: scale(0.95);
    -webkit-transition-duration: 0.1s;
        -webkit-transform: scale(0.95);
  box-shadow: 0 0 0 0;
}

我尝试了一些解决方法，例如使用带过渡的宽度和高度，但这会使所有其他表格单元格展开。有什么办法吗？

【问题讨论】：

标签： javascript css html-table

【解决方案1】：

将初始尺寸设为您要使用的最大比例，并从较小的比例开始。这是fiddle 您必须将td 的宽度增大，但添加padding

【讨论】：

没用...但没关系。我自己想通了。我只是为每个表格单元格的内容提供了自己的 div，然后使用带过渡的宽度来制作悬停效果。

【解决方案2】：

我解决了。

您需要做的就是在表格单元格中为内容提供自己的 div，然后使用宽度和过渡来制作悬停效果。确保给表格单元格“溢出：隐藏”。

【讨论】：