此问题已在此处有答案：

Is there a "previous sibling" selector?（33答案）
昨天关门了。
我有一个导航栏.navbar，它有7个直接子项navbar-item。
目前，我使它当你悬停在一个导航栏项目，它会增加它的宽度和高度20px。但我想要的是，当你悬停在其中一个项目上时，它会增加它的高度和宽度20px，它会增加它的直接相邻divs，（所以左右divs，除非它是在边缘），宽度和高度10px。
我想要的一个很好的例子是macOS应用程序栏效果。
代码：

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>

我尝试使用.navbar-item:hover + .navbar-item，但这只是改变了实际悬停在其上的div右侧的宽度和高度。
我读了这个问题：How to affect other elements when one element is hovered
但它没有回答我的问题。