SOURCE

<div class="box">
  <div class="son">乔丹</div>
  <div class="son">科比</div>
  <div class="son">詹姆斯</div>
  <div class="son">奥尼尔</div>
  <div class="son">邓肯</div>
  <div class="son">卡特</div>
  <div class="son">麦迪</div>
  <div class="son">艾弗森</div>
  <div class="son">库里</div>
  <div class="son">杜兰特</div>
</div>

.box {
    height: 100px;
    display: flex;
}

.son {
    width: 50px;
    height: 50px;
    background-color: orange;
    border-radius: 50%;
    color: #ffffff;
    line-height: 50px;
    text-align: center;
    font-size: 12px;
    margin: 0 10px;
    cursor: pointer;
    transition: all .2s;
}

.son:hover {
    background-color: #67c23a;
    transform: scale(1.4);
}

.son:hover + .son {
    transform: scale(1.1);
}

.son:has( + .son:hover) {
    transform: scale(1.2);
}

.box:has(.son:hover) .son:not(:hover, :has( + :hover), .son:hover + *) {
    transform: scale(0.8);
    opacity: 0.7;
}