html - 悬停时阻止表格元素移动位置？

Question

所以我有一个有两行的表。再多一张图片，一张用于下面的段落。这些图像链接到不同的网页，并且我有一个动画，其中边框增长并改变颜色，但我不希望图像在悬停时移动位置。有什么办法可以阻止图像这样做吗？

.project-table img {
  border: 6px solid white;
  width: 300px;
  transition: all 0.5s ease;
}

.project-table img:hover {
  border: 12px solid #FF1D58;
}

td {
  padding: 0px 180px 0 0;
  width: 110px;
  text-align: center;
}

<table class="project-table">
  <tr>
    <td>
      <a href="https://thebenlusted.github.io/jsauthentication/" target="_blank" title="JavaScript Authenticator"><img src="images/js-auth-screenshot.png"></a>
    </td>
    <td>
      <a href="https://google.ca" target="_blank" title="FrickIt Studios Website"><img src="images/sigma-site-screenshot.png"></a>
    </td>
  </tr>
  <tr>
    <td>
      <p>Hello? This is a paragraph. I am trying to see what the width and height is on this element. If we keep the paragraphs at the same length then we won't have this lame height difference.
      </p>
    </td>
    <td>
      <p>Hello? This is a paragraph. I am trying to see what the width and height is on this element. If we keep the paragraphs at the same length then we won't have this lame height difference.
      </p>
    </td>
  </tr>
</table>

Answer 1

发生这种情况是因为您增加了边框宽度，但是您也可以通过使用css属性box-shadow来实现相同的效果。

.project-table img {
  border: 6px solid white;
  width: 300px;
  transition: all 0.5s ease;
}

.project-table img:hover {
  border-color: #FF1D58;
  box-shadow: 0 0 0 6px rgba(255, 29, 88, 1);
}

td {
  padding: 0px 180px 0 0;
  width: 110px;
  text-align: center;
}

<table class="project-table">
            <tr>
              <td><a href="https://thebenlusted.github.io/jsauthentication/" target="_blank" title="JavaScript Authenticator"><img src="images/js-auth-screenshot.png"></a></td>
              <td><a href="https://google.ca" target="_blank" title="FrickIt Studios Website"><img src="images/sigma-site-screenshot.png"></a></td>
            </tr>
            <tr>
              <td><p>Hello? This is a paragraph. I am trying to see what the width and height is
                on this element. If we keep the paragraphs at the same length then we won't have this
                lame height difference.
              </p></td>
              <td>
                <p>Hello? This is a paragraph. I am trying to see what the width and height is
                  on this element. If we keep the paragraphs at the same length then we won't have this
                  lame height difference.
                </p>
              </td>
            </tr>
          </table>