如果一个元素悬停，则更改其他元素的 CSS 值

Question

我有一些由 .card 框元素显示的社交媒体链接。现在我想让如果没有 .card 悬停，不透明度将保持在 1 但如果有一个 .card 悬停，则每个除实际悬停的卡片外，其他卡片现在应将其不透明度更改为 0.7。我的 .card 只有类 cardsocialsElement。

我已经尝试过这个

.socialsElement.card:hover .card:not(:hover) {
    opacity: 0.5;
}

但不起作用

（期望） 如果没有悬停 如果悬停一张卡片 实时预览

Answer 1

你就快到了：

div {
  display: inline-block;
  width: 100px;
  height: 100px;
  margin 1em;
  background: navy;
}

section:hover div {opacity:.7}

section:hover div:hover {opacity:1}

<section>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</section>