悬停时阻止表格元素移动位置？ [复制]

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>

Answer 2

使用box-shadow 代替border

.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 7px 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>

Answer 3

您只需要在悬停和不悬停时保持相同的边框宽度。

.project-table img {
  border: 12px 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>