JSFiddle - React, Tailwind, and code Playground

by LuckyCat

HTML

<div class="main">
  <h1>your browser does not support :has() psudoclass currently :(</h1>
  <div class="box">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
    <div class="item">5</div>
    <div class="item">6</div>
    <div class="item">7</div>
    <div class="item">8</div>
    <div class="item">9</div>
    <div class="item">10</div>
    <div class="item">11</div>
    <div class="item">12</div>
  </div>
</div>

CSS

@supports not selector(:has(a)) {
  .box {
    display: none !important;
  }

  h1 {
    display: block !important;
  }
}
.main {
  width: 100%;
  height: 100vh;
  display: grid;
  place-items: center;
  font-family: arial;
}
.main h1 {
  display: none;
}
.main .box {
  display: grid;
  grid-template-columns: repeat(12, 48px);
  place-items: center;
}
.main .box:hover .item:has(+ .item:hover) {
  height: 70px;
  background: #edcbcb;
}
.main .box:hover .item:hover {
  cursor: pointer;
  height: 100px;
  font-size: 18px;
  background: #ff9b9b;
}
.main .box:hover .item:hover + .item {
  height: 70px;
  background: #edcbcb;
}
.main .box .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;
}