<div class="main">
  <div class="box">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
  </div>
  <p>hover试试</p>
</div>

.main {
  width: 100%;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  h1 {
    display: none;
  }
  .box {
    display: grid;
    grid-template-columns: repeat(12, 48px);
    place-items: center;
    height: 130px;
    &:hover {
      .item {
        // **** 重点 ****
        &:has(+ .item:hover) {
          height: 70px;
          background: #edcbcb;
        }
        &:hover {
          cursor: pointer;
          height: 100px;
          font-size: 18px;
          background: #ff9b9b;
          & + .item {
            height: 70px;
            background: #edcbcb;
          }
        }
      }
    }
    .item {
      box-sizing: border-box;
      width: 48px;
      height: 48px;
      background: #eee;
      border-radius: 8px;
      border: 4px solid #fff0;
      background-clip: padding-box !important;
      display: grid;
      place-items: center;
      transition: all 0.3s ease;
    }
  }
}