css – 当一个链接被悬停时,如何仅影响其他链接

.navlink {
  width: 100px;
  display:inline-block;
  background-color: red;
}

.navlink:hover~.navlink {
  width: 50px;
}

.navlink:hover {
  width: 150px;
  background-color: pink;
}

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

.container {
  display: flex;
  width: 400px;
}

.navlink {
  flex: 1;
  margin: 0 5px;
  background-color: red;
  transition: 0.3s all;
}

.navlink:hover {
  flex: 3; /*Adjust this to control the size*/
  background-color: pink;
}

<div class="container">
  <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>