我正在使用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
答案 0 :(得分:1)
尝试使用转换和转换。所有CSS,不需要JS / JQ
.icon {
transition:transform .25s ease;
}
.icon:hover {
transform:scale(1.5);
}
&#13;
<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
&#13;