Affect neighboring divs on both side on hover

Question

I have a navbar, .navbar, that has 7 direct children, navbar-item.

Currently, I made it so when you hover over a navbar item, it would increase it's width and height by 20px. But what I want is that when you hover over one of the items, it would increase it's height and width by 20px, and it would increase it's Directly Neighboring divs, (so the left and right divs, unless it is on on the edge), width and height by 10px.

A great example of what I want is like the macOS app bar effect.

Code:

body {
  background-color: #D3D3D3;
}

.navbar {
    width: 600px;
    height: 50px;
    border-radius: 999px;
    background-color: white;
    padding: 5px;
    display: flex;
    align-items: center;
    justify-content: space-around;
}

.navbar-item {
    border: 1px solid black;
    height: 50px;
    width: 50px;
    border-radius: 50%;
}

.navbar-item:hover{
    width: 70px;
    height: 70px;
}

<div class="navbar">
  <div class="navbar-item"></div>
  <div class="navbar-item"></div>
  <div class="navbar-item"></div>
  <div class="navbar-item"></div>
  <div class="navbar-item"></div>
  <div class="navbar-item"></div>
  <div class="navbar-item"></div>
</div>

I tried to use .navbar-item:hover + .navbar-item, but that just changed the width and height of the div to the right of the one actually being hovered on.

I read this question: How to affect other elements when one element is hovered

But it did not answer my question.

score 1 · Accepted Answer · answered Jun 23 '23 at 23:11

:has() selector can help you here. I am using scale instead of width/height but not relevant to the main trick

body {
  background-color: #D3D3D3;
}

.navbar {
  width: 600px;
  height: 50px;
  border-radius: 999px;
  background-color: white;
  padding: 5px;
  display: flex;
  align-items: center;
  justify-content: space-around;
}

.navbar-item {
  border: 1px solid black;
  height: 50px;
  width: 50px;
  border-radius: 50%;
  transition: .3s;
}

.navbar-item:hover { /* main element */
  scale: 1.5;
}
/* direct neighbors */
.navbar-item:hover + *,
.navbar-item:has(+ .navbar-item:hover){
  scale: 1.2;
}

<div class="navbar">
  <div class="navbar-item"></div>
  <div class="navbar-item"></div>
  <div class="navbar-item"></div>
  <div class="navbar-item"></div>
  <div class="navbar-item"></div>
  <div class="navbar-item"></div>
  <div class="navbar-item"></div>
</div>

Affect neighboring divs on both side on hover

1 Answers1