我在 ul 列表的 li 中有一些图标。我想在将鼠标悬停在图标上时使 font-size 变大。
问题是当我将鼠标悬停在图标上时，其他图标的位置会发生变化。
CSS 和 HTML:
li a:hover {
text-decoration: none;
}
i.s-m-i {
color: black;
transition: 0.3s;
font-size: 30px;
}
i.s-m-i:hover {
color : blue;
font-size: 35px;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
</head>
<body>
<br>
<ul class="list-unstyled text-center">
<li class="d-inline">
<a href="#">
<i class="fa fa-telegram s-m-i"></i>
</a>
</li>
<li class="d-inline ml-3">
<a href="#">
<i class="fa fa-instagram s-m-i"></i>
</a>
</li>
<li class="d-inline ml-3">
<a href="#">
<i class="fa fa-github s-m-i" ></i>
</a>
</li>
<li class="d-inline mr-1 ml-3">
<a href="#">
<i class="fa fa-linkedin s-m-i" ></i>
</a>
</li>
</ul>
</html>我应该如何修复其他图标的位置？
谢谢。
最佳答案
试试这个，
使用变换比例属性而不是在悬停时更改字体大小
li a:hover {
text-decoration: none;
}
i.s-m-i {
color: black;
font-size: 30px;
transition: all .3s ease-in-out;
}
i.s-m-i:hover {
color : blue;
transform: scale(1.3);
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
</head>
<body>
<br>
<ul class="list-unstyled text-center">
<li class="d-inline">
<a href="#">
<i class="fa fa-telegram s-m-i"></i>
</a>
</li>
<li class="d-inline ml-3">
<a href="#">
<i class="fa fa-instagram s-m-i"></i>
</a>
</li>
<li class="d-inline ml-3">
<a href="#">
<i class="fa fa-github s-m-i" ></i>
</a>
</li>
<li class="d-inline mr-1 ml-3">
<a href="#">
<i class="fa fa-linkedin s-m-i" ></i>
</a>
</li>
</ul>
</html>关于html - 悬停在其他元素上时修复元素的位置，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/64574894/