在不移动其他元素的情况下调整图标大小答案

【问题标题】：resize icon without moving other elements在不移动其他元素的情况下调整图标大小
【发布时间】：2026-01-16 18:05:02
【问题描述】：

我正在使用 jquery 动画来调整悬停图标的大小。有没有办法让图标调整大小而不移动其他元素？运行 sn-p 下面将鼠标悬停在图标上。（这是我想要的效果 https://semantic-ui.com/elements/icon.html 悬停在任何图标上）

$(document).ready(function() {
    $('.icon').hover(function(){
        $(this).stop().animate({ fontSize : '3em' });
    }, function(){
     $(this).stop().animate({ fontSize : '1.5em' });
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/1.11.8/semantic.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/1.11.8/semantic.min.css" rel="stylesheet"/>


<div class="ui doubling five column grid">
        <div class="column">     
          <div class="ui center aligned segment basic">
             <i class="large home icon"></i>
             <p style="padding-top: 5px;">
             home
             </p>       
          </div>     
        </div>
    </div>
    
    some other content

【问题讨论】：

您可以在图标上使用 position: absolute 将其从文档流中取出，但我什至看不到它在 UI 方面的工作方式，因为它会覆盖单词 '家'，如果它没有向下移动。另请注意，您在这里不需要任何 JS。您可以单独使用 CSS 与 :hover 选择器和 transition 规则
你可以试试 set .doubling > .column >.ui {minimum-height: [THIS_BLOCK_HEIGHT_ON_HOVER]}

标签： jquery css jquery-animate semantic-ui

【解决方案1】：

尝试改用变换和过渡。全部 CSS，无需 JS/JQ

.icon {
  transition:transform .25s ease;
}

.icon:hover {
  transform:scale(1.5);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/1.11.8/semantic.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/1.11.8/semantic.min.css" rel="stylesheet"/>


<div class="ui doubling five column grid">
        <div class="column">     
          <div class="ui center aligned segment basic">
             <i class="large home icon"></i>
             <p style="padding-top: 5px;">
             home
             </p>       
          </div>     
        </div>
    </div>
    
    some other content

【讨论】：