我正在使用 jquery 动画来调整鼠标悬停时图标的大小。有没有办法只调整图标大小而不移动其他元素?将鼠标悬停在图标上运行下面的代码片段。 (这是我想要的效果 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
最佳答案
尝试使用变换和过渡。全 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
关于jquery - 在不移动其他元素的情况下调整图标大小,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46280857/