CSS 在悬停时定位同级元素的子元素

Question

我有以下情况：

我的 CSS 网格中有 4 张卡片。第一个应该是“特色”（不同的背景等），并且将鼠标悬停在其余卡片上时，我希望将功能样式更改为悬停的卡片并“取消特色”第一个卡片。

HTML：

<div class="benefits__grid">
     <div class="benefits__card">
         <h3>Heading</h3>
         <p>Text</p>
     </div>
     <div class="benefits__card">
         <h3>Heading</h3>
         <p>Text</p>
     </div>
     <div class="benefits__card">
         <h3>Heading</h3>
         <p>Text</p>
     </div>
     <div class="benefits__card">
         <h3>Heading</h3>
         <p>Text</p>
     </div>
</div>

我成功地通过更改元素的顺序来定位特色卡（因此特色卡位于 DOM 中的最后，但显然是第一个）并使用最后一个子级，如下所示：

benefits__card:not(:last-child):hover ~ benefits__card(:last-child) {
    background-color: black;
}

这工作正常。然而，我无法针对特色卡的子卡。我认为这样的事情应该有效，但事实并非如此：

benefits__card:not(:last-child):hover ~ benefits__card(:last-child) h3 {
    color: var(--black);
}

有什么想法吗？

尝试了帖子中发布的CSS，但无济于事。

Answer 1

您可以使用父级悬停来取消特色颜色：

.benefits__grid:hover .featured {
  background: transparent;
  color: black;
}

.featured,
.benefits__grid .benefits__card:hover {
  background: black;
  color: white;
}

<div class="benefits__grid">
  <div class="benefits__card featured">
    <h3>Heading</h3>
    <p>Text</p>
  </div>
  <div class="benefits__card">
    <h3>Heading</h3>
    <p>Text</p>
  </div>
  <div class="benefits__card">
    <h3>Heading</h3>
    <p>Text</p>
  </div>
  <div class="benefits__card">
    <h3>Heading</h3>
    <p>Text</p>
  </div>
</div>