Html 悬停表格单元格文本时，使元素的字体大小更大，同时保持表格单元格的高度不变

发布于09月24日

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

这就是: 当我将鼠标悬停在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>

#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%; }

Html 悬停表格单元格文本时，使元素的字体大小更大，同时保持表格单元格的高度不变

推荐答案

Html相关问答推荐

角｜将动态html属性添加到子组件

将文本区域标签的内容着色为SON(带有 colored颜色 )

如何在不影响子列表的情况下在HTML(OL Li)上同时加数字和列表？

UseEffect()从不调用preact

未显示新组件的视图

如何创建带有粘性列和标题的网格？

HTMLTag属性内的svelte+TS类型声明

如何用背景色填充边框半径创建的间隙

为什么要添加换行符(至少在 Google Chrome 中)

如何防止弹性项目溢出容器？

在屏幕上每行 css 中的特定列居中

如何在 VS Code 中 Select 和删除 HTML 元素(其标签和内容)？

使单行路径的 svg 填充父级的 100% 宽度

Google Apps 脚本 - RegEx 适用于小文本，但不适用于大文件？

pull-right 不适用于 bootstrap alert 内的按钮

奇怪的幻影 div 命名为

有没有办法让 textarea 在调整大小时不显示 CSS 转换？

如何向弹出窗口添加 sanitize： false 选项？

SVG 适用于 Safari，不适用于 Chrome

所有幻灯片上的 Quarto RevealJS 标题