I’m currently attempting a do very specific kind of navigation bar for my website. The main ‘feature’ of it is that on hover over each menu item, the item itself grows, while both the item before and the item after moves x pixels away from the item.

The styling of these elements is what would perform these transformations, using the following:

.navitem{
  display:inline;
  transition: transform .75s ease-in-out;
}
.navitemRight {
  transform: translate(10px);
}
.navitemLeft{
  transform: translate(-10px);
}
.navitemCenter{
  text-shadow:0px 0px 1px black;
  transform: scale(1.20);
}

The problem is that there seems to be no way to apply these style whenever an item is hovered. It seems as though for each item, they should have these kind of stylings :

.item2 : hover ~ item 1{
   blabla
} 
.item2 : hover ~ item 3{
   blabla
} 

but they should generated somehow, since the navigation bar’s items are dynamic.

I tried using React and really thought I was going to get away with it, where onMouseEnter and onMouseLeave changed the state of the component, and everytime, it would re-render the navbar, with the correct style, like so:

almost working but ugly when hover out

But it does not satisfy me because we only get the transform when hovering, and lose the transition whenever the state changes, which is why the change is so ugly when I hover out. For reference, here’s an example of what it looks like when you have the same trasnform and transition:

simple transform

Anyways, I am sure there is a way to do it, using Javascript probably, maybe sass or Jquery, both of which im not really familiar with. If you have any idea, or maybe a reference to tools that could help me with that, it would be very apprecited!Thanks