I've been attempting to shrink all other links when one link is hovered over, but I'm only able to make the links after the hovered one shrink.
.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>