CSS變換比例也增加div父主體

將滑鼠懸停在錨鏈接上時，我在使用變換比例屬性格式化錨鏈接時遇到問題。

我在 div 中有一個鏈接（該 div 用于將鏈接放在右側），當我懸停在它上面時我想放大。但是，當我這樣做時，它也會增加父 div 的主體大小，從而移動頁面上的所有其他元素。為什么會這樣？據我所知，比例不應該作用于元素的大小，尤其是它的父元素。

你能告訴我我錯在哪里嗎。我對 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/[email protected]/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> 

uj5u.com熱心網友回復：

您在懸停時添加邊框以更改元素的大小。在基本狀態上添加透明邊框并在懸停時更改其顏色。

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/[email protected]/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>

標籤：html css

上一篇：將滑鼠懸停在另一個文本上時如何顯示文本？[復制]

下一篇：如何使用javascript在DOM中顯示數字？