Css 当一个链接被悬停时，如何仅影响其他链接

我一直试图使所有其他链接缩小时，一个被悬停，但到目前为止，它只缩小了链接后，一个被悬停

.navlink{
宽度：100px；
显示：内联块；
背景色：红色；
}
.navlink:hover~.navlink{
宽度：50px；
}
.navlink:悬停{
宽度：150px；
背景颜色：粉红色；
}

链接1
链接2
链接3
链接4

您可以为此尝试flexbox，您只需调整悬停链接，另一个默认情况下会收缩

.container{
显示器：flex；
宽度：400px；
}
.导航链接{
弹性：1；
利润率：0.5px；
背景色：红色；
过渡：0.3s全部；
}
.navlink:悬停{
flex:3；/*调整此值以控制大小*/
背景颜色：粉红色；
}

链接1
链接2
链接3
链接4

尝试使用以下html代码：

<div class="parent">
  <a class="navlink">link 1</a>
  <a class="navlink">link 2</a>
  <a class="navlink">link 3</a>
  <a class="navlink">link 4</a>
</div>

---

我建议调整大小的宽度等于它开始时的宽度。如果您在

100px

开始处有四个元素，这将使总宽度

400px

（加上任何边距/填充物），那么将调整大小的元素设置为等于

400px

，以确保您不会得到任何奇怪的东西

.navlink{
显示：内联块；
宽度：100px；
背景色：红色；
过渡：宽度0.3s；
}
.container:hover.navlink:not（：hover）{
宽度：75px；
}
.navlink:悬停{
宽度：175px；
背景颜色：粉红色；
}

链接1
链接2
链接3
链接4

这对现代浏览器很好，但对旧浏览器的支持已经丧失。

.navlink {
  width:100px;
  background-color:red;
  display:inline-block;
}
.parent:hover .navlink{
  width:50px;
}
.parent .navlink:hover{
  width:150px;
  background-color:pink;
}