我是CSS的新手，我正在努力让这个垂直的右侧菜单发挥作用。问题是：当我在图像上悬停时，它们会变大(这是故意的(，但当我在这些图像之间悬停时，一切似乎都在跳跃，我不知道为什么。
body {
font-family: "Quicksand", sans-serif;
font-size: 18px;
font-weight: 400;
color: #eee4e4;
overflow-x: hidden;
}
ul {
list-style-type: none;
box-sizing: border-box;
float: right;
position: fixed;
z-index: 1000;
right: 0;
top: 0;
height: 100%;
overflow: auto;
text-align: center;
}
li {
padding-bottom: 10px;
padding-top: 10px;
padding-right: 10px;
border: solid 2px blue;
}
img {
height: 40px;
width: 40px;
}
img:hover {
width: 50px;
height: 50px;
}
li:hover {
padding-right: 0px;
padding-bottom: 0px;
}<body>
<!-- Social Media NAV -->
<nav>
<ul>
<li>
<a href="#"><img src="img/facebook1.svg" alt="Facebook"></img>
</a>
</li>
<li>
<a href="#"><img src="img/twitter1.svg" alt="Twitter"></img>
</a>
</li>
<li>
<a href="#"><img src="img/instagram1.svg" alt="Instagram"></img>
</a>
</li>
<li>
<a href="#"><img src="img/whatsapp1.svg" alt="Whatsapp"></img>
</a>
</li>
</ul>
</nav>
</body>这是因为您还有一个影响填充的li:hover。
也许一个替代的解决方案可以是在<img>中使用transform并移除li:hover
img:hover {
transform: scale(1.2)
}