CSS 变换比例也增加 div 父体答案

【问题标题】：CSS transform scale increase also div parent bodyCSS 变换比例也增加 div 父体
【发布时间】：2026-02-10 07:00:01
【问题描述】：

当悬停在锚链接上时，我在使用变换比例属性格式化锚链接时遇到问题。

我有一个 div 内的链接（该 div 用于点亮右侧的链接），当我将鼠标悬停在它上面时我想放大。但是，当我这样做时，它也会增加父 div 的主体大小，从而移动页面上的所有其他元素。为什么会这样？据我所知， scale 不应该作用于元素的大小，尤其是它的父元素。

你能告诉我哪里错了吗？我对 html 和 css 很陌生，所以我的代码可能完全设置错误。

感谢任何可以帮助我的人。

a#fonte1 {
    font-size: 1rem !important;
    font-weight: 300 !important;
    transition: transform 0.2s ease !important;
    display: inline-block !important;
  }

a#fonte1:hover {
    transform: scale(1.2) !important;
    cursor: pointer !important;
    color: rgb(13,89,253) !important;
    border: 1px solid rgb(13,89,253) !important;
    border-radius: 0.3rem !important;
  }

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

<section class="showcase border-bottom">
    <div class="container-fluid p-0">
        <div class="row g-0">
            <div class="col-lg-6 order-lg-2">
                ...
                        </div>  
            <div class="col-lg-6 order-lg-1 ">
                <h2>[title 1]</h2>
                            <p class="mb-0" style = "text-align: justify">
                    ...
                            </p>
                            <div style="text-align:right;">
                    <a id="fonte1" href="#">
                        Link
                    </a>
                </div>
                    </div>
        </div>
                <div class="row g-0">
                    <div class="col-lg-6 ">
                            ...
                        </div>
                <div class="col-lg-6 ">
                            <h2>[title 2]</h2>
                            <p class="mb-0" style = "text-align: justify">
                                    ...
                            </p>
                        </div>
        </div>
    </div>
</section>

【问题讨论】：

那么，你能给孩子 div 一个类并做悬停吗？
@Paulie_D：谢谢，我改了，问题依然存在；
@Daniel Dominic：如果我这样做，它会缩放所有 div，因此链接文本会超出边界（即，当我悬停时，它不再与上述段落对齐）。
@Paulie_D 对不起，我知道你想帮助我，我没有尽我所能，但我试图通过 JSFiddle 创建一个 sn-p 槽，但我没有t 实现重现问题。我应该导入所有引导部分，但这会使 sn-p 肯定不是“最小的”。
@Paulie_D 好的，非常感谢你，我确实设法用 sn-p 复制了问题来编辑我的原始帖子。如您所见，当我将鼠标悬停在“链接”上时，下面的元素会向下移动。

标签： html css

【解决方案1】：

您在悬停时添加了一个边框，该边框会更改元素的大小。在基本状态上添加透明边框并在悬停时更改其颜色。

a#fonte1 {
  font-size: 1rem;
  font-weight: 300;
  transition: transform 0.2s ease;
  display: inline-block;
  border: 1px solid transparent;
}

a#fonte1:hover {
  transform: scale(1.2);
  cursor: pointer;
  color: rgb(13, 89, 253);
  border: 1px solid rgb(13, 89, 253);
  border-radius: 0.3rem;
}

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

<section class="showcase border-bottom">
  <div class="container-fluid p-0">
    <div class="row g-0">
      <div class="col-lg-6 order-lg-2">
        ...
      </div>
      <div class="col-lg-6 order-lg-1 ">
        <h2>[title 1]</h2>
        <p class="mb-0" style="text-align: justify">
          ...
        </p>
        <div style="text-align:right;">
          <a id="fonte1" href="#">
                        Link
                    </a>
        </div>
      </div>
    </div>
    <div class="row g-0">
      <div class="col-lg-6 ">
        ...
      </div>
      <div class="col-lg-6 ">
        <h2>[title 2]</h2>
        <p class="mb-0" style="text-align: justify">
          ...
        </p>
      </div>
    </div>
  </div>
</section>

【讨论】：

非常感谢 Paulie，你真的很有帮助。我解决了。