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

Question

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

我已经试过了

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

但不起作用

（预期） If none is being hovered If One card is being hovered Live Preview

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>

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

Change CSS value of other elements if one element is being hovered

html

css

hover