悬停在表格单元格文本上时，增大元素的字体大小，同时保持表格单元格的高度相同

Question

当我将鼠标悬停在单元格内的文本上时，我希望该文本的大小增加 120%。但在我的代码中，当我将鼠标悬停在marketplace和integrations和newsletter上时，列和整个表格都会移动。 我也尝试了很多解决方案，但无法成功。

即： 当我将鼠标悬停在 MARKETPLACE 上时，它应该将字体大小增加 120%，确实如此，但问题是列部分移动，同样的情况发生在 integrations 和 newsletter 中 如果有人在这方面帮助我，那就太好了。

#footer h1 {
  font-size: 35px;
  margin: -145px 0px 0px 150px;
}

#footer div table {
  color: black;
  text-align: left;
  width: 800px;
  height: 220px;
  margin: 0px 115px 0px 0px;
  font-size: 14px;
}

#footer div table tr td {
  padding-bottom: 5px;
  opacity: 70%;
  position: relative;
}

#footer div table tr td a {
  text-decoration: none;
  color: black;
  height: 220px;
  /* position: relative; */
}

#footer div table tr td a:hover {
  transition: 0.5s;
  color: red;
  font-size: 120%;
  position: absolute;
  top: 2px;
  left: 0px;
}

<footer id="footer">
  <div>
    <table border="1">
      <tr>
        <td><a href="">Overview</a></td>
        <td><a href="">About</a></td>
        <td><a href="">Contact</a></td>
      </tr>
      <tr>
        <td><a href="">Pricing</a></td>
        <td><a href="">Team</a></td>
        <td><a href="">Newsletter</a></td>
      </tr>
      <tr>
        <td><a href="">Marketplace</a></td>
        <td><a href="">Blog</a></td>
        <td><a href="">LinkedIn</a></td>
      </tr>
      <tr>
        <td><a href="">Features</a></td>
        <td><a href="">careers</a></td>
      </tr>
      <tr>
        <td><a href="">Integrations</a></td>
      </tr>
    </table>
  </div>
</footer>

Answer 1

1. 防止列大小调整：为您的表格使用 table-layout:fixed;。表格列将不再自动调整大小。如果您想完美地定义每列的宽度，您可能需要为第一个表格行中的每个 td 应用宽度。此步骤将解决“新闻通讯”的悬停问题。

2. 防止行调整大小：将 display: block; 或 display: inline-block 添加到您的 a 标签，并且 高度大于缩放后的字体高度（例如 30 像素）。 CSS 中的 height 属性仅适用于（内联）块元素，但 a 标签默认是内联的。删除位置：绝对；顶部：2px；左：2px；。这将解决其他问题。

3. 奖励：优化代码

   • 删除所有位置：相对；。
   • 从桌子上移除高度。
   • 移动过渡：0.5秒；从a：悬停到a
   • 考虑简化 CSS 选择器（例如 #footer div table tr td 到 #footer td

最终你的 CSS 代码可能如下所示：

#footer h1 {
   font-size: 35px;
   margin: -145px 0px 0px 150px;
}

#footer table {
   color: black;
   text-align: left;
   width: 800px;
   margin: 0px 115px 0px 0px;
   font-size: 14px;
   table-layout: fixed; /* see 1. */
}

#footer td {
  padding-bottom: 5px;
  opacity: 70%;
}

#footer td a {
   text-decoration: none;
   color: black;
   display: inline-block; /* see 2. */
   height: 30px; /* see 2. */
   transition: 0.5s;
}

#footer td a:hover {
   color: red;
   font-size: 120%;
}