我目前正在通过将社交媒体图标添加到他的网站来帮助他的 friend 。我想使用很酷的悬停效果,但是当我悬停图标时,它们会在 div
内移动。这并不奇怪,但除了调整填充使它们看起来像不动之外,我找不到任何其他方法。它看起来不太体面,有点作弊。
<script src="https://use.fontawesome.com/a63c918c5b.js" type="text/javascript">
</script>
<style media="screen" type="text/css">
.icons {
position: relative;
padding: 9px;
}
.icons:hover {
color: #4f5255;
font-size: 19px;
transition: font-size 0.2s;
/*padding: 7px;*/
}
div {
height: 100px;
width: 200px;
float: left;
}
</style>
<div>
<a target="_blank" href="link" class="icons fa fa-facebook" style="color: #4f5255;text-decoration:none;"></a>
<a target="_blank" href="link" class="icons fa fa-twitter" style="color: #4f5255;text-decoration:none"></a>
<a target="_blank" href="link" class="icons fa fa-instagram" style="color: #4f5255;text-decoration:none"></a>
</div>
我不希望将鼠标悬停在其中一个图标上时图标水平和垂直移动。我该如何解决?
最佳答案
不要改变字体大小。使用 scale()
。这不会影响周围的元素。
如果您将 transition
移动到默认状态,而不是 :hover
状态,您将不会“快速”返回到默认大小。
<script src="https://use.fontawesome.com/a63c918c5b.js" type="text/javascript">
</script>
<style media="screen" type="text/css">
.icons {
position: relative;
padding: 9px;
transition: transform 0.2s;
}
.icons:hover {
color: #4f5255;
transform: scale(1.3);
}
div {
height: 100px;
width: 200px;
float: left;
}
</style>
<div>
<a target="_blank" href="link" class="icons fa fa-facebook" style="color: #4f5255;text-decoration:none;"></a>
<a target="_blank" href="link" class="icons fa fa-twitter" style="color: #4f5255;text-decoration:none"></a>
<a target="_blank" href="link" class="icons fa fa-instagram" style="color: #4f5255;text-decoration:none"></a>
</div>
关于html - div 中的 CSS 对象在悬停时移动,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38397012/