How to affect only other links when one is being hovered

Question

I've been trying to make all other links shrink when one is being hovered, but so far it only shrinks the links afterwards the one being hovered

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

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

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

link 1
link 2
link 3
link 4

user_8620333 · Answer

You can try flexbox for this and you only need to adjust the hovered link and the other will shrink by default

.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;
}


  link 1
  link 2
  link 3
  link 4

user_2112501 · Answer

I suggest making the width of the resize to be equal to that which it started. If you have four elements at 100px starting, which will make the total width 400px (plus any margin/padding stuff), then make the resized elements equal out to 400px as well to ensure that you are not getting any weird stuff.

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

.container:hover .navlink:not(:hover) {
  width: 75px;
}

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


  link 1
  link 2
  link 3
  link 4

user_6566594 · Answer

try with this html code:


  link 1
  link 2
  link 3
  link 4

y css:

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

How to affect only other links when one is being hovered

3 Answers