HTML

<div class="container">
          <div class="item">Home</div>
          <div class="item">Shop</div>
          <div class="item">About</div>
          <div class="item">Contact</div>

CSS

.container {
           display: flex;
           padding: 2rem 3rem;
           gap: 2rem;
           border-radius: 1 rem;

CSS

.item {
color: #ffffff;
transition: color 300ms;
}

.container: has(.item:hover)
   .item:not(:hover)  {
    color: #888888;
}