My navigation bar, known as .navbar, consists of 7 direct child elements called navbar-item.
Currently, I have implemented a hover effect where the width and height of a navbar item increase by 20px upon hovering. However, my goal is to enhance this interaction further so that when an item is hovered over, its dimensions grow by 20px while its neighboring divs (to the left and right, excluding edge cases) expand by 10px.
An ideal reference for the desired outcome would be the macOS app bar effect.
Here's a snippet of the 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 attempted using
.navbar-item:hover + .navbar-itemAfter reviewing a similar question here: How to affect other elements when one element is hovered, I found that it did not provide a solution to my specific query.