html - 如何设置影子根兄弟的样式？

Question

这不是重复的。我已经尝试过现有的解决方案，但不适用于我的示例。

我有一个创建卡片列表的父组件。悬停时，我想将所有兄弟姐妹都向右移动。

    .card:hover ~ .card {
      transform: translateX(20rem);
    }

但是，因为这些兄弟姐妹中的每一个都是影子根，所以似乎不会影响它。

这是我尝试过的。

import { LitElement, html, css } from "lit-element";

class PokemonCard extends LitElement {
  static styles = css`
    .card {
      background: white;
      border-radius: 1rem;
      padding: 2rem;
      box-shadow: 4px 4px 12px 2px rgba(0, 0, 0, 0.75);
      height: 400px;
      width: 200px;
      transition: 0.2s;
      margin-right: -10rem;
    }
    .card:hover {
      transform: translateY(-5rem);
    }
    .card:hover ~ .card {
      transform: translateX(20rem);
    }
  `;

  static get properties() {
    return {
      item: { type: Object },
    };
  }

  render() {
    return html`
      <div class="card">
          <h2>${item.name}</h2>
        </div>
      </div>
    `;
  }
}

customElements.get("pokemon-card") ||
  customElements.define("pokemon-card", PokemonCard);