css - CSS否定伪类不起作用

Question

我付出的代价是要求太多这种否定伪。

我有一个这样的 HTML 结构：

<div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
</div>

在 CSS 中，我有：

.item:hover .item:not(.item:hover) {
    opacity: 0.3;
}

我希望当我悬停一个时，这会导致所有 div.items 改变不透明度，除了我悬停的那个。但是，事实并非如此。

是什么赋予了？

Answer 1

对于您的用例，我建议：

div:hover div.item {
    opacity: 0.3;
}

div:hover div.item:hover {
    opacity: 1;
}

JS 小提琴演示。

问题是您的选择器正在寻找具有 class 的元素，该元素item未悬停在同一类的另一个元素中。您发布的 CSS 显示父元素没有类，因此选择器永远无法匹配。