所有元素过滤但悬停

Question

如何选择除悬停元素外的所有元素并添加滤镜（如模糊或亮度）

像这样

我尝试过

.class:hover *:not(.class:hover)

这不起作用。

如果使用父div，则过滤器处于覆盖状态。我该怎么解决？

Answer 1

这里是hover的{​​{1}}上的元素，Child的其余部分是过滤器

Child

.parent .child:not(:hover) {
  color:#00ffff;
  -webkit-filter: grayscale(1);
  -moz-filter: grayscale(1);
  -ms-filter: grayscale(1);
  filter: grayscale(1);
  opacity: .75;
}

并使用父级<div class="parent"> <div class="child">Child 1</div> <div class="child">Child 2</div> <div class="child">Child 3</div> </div>

Hover

.parent:hover .child:not(:hover) {
  color:#00ffff;
  -webkit-filter: grayscale(1);
  -moz-filter: grayscale(1);
  -ms-filter: grayscale(1);
  filter: grayscale(1);
  opacity: .75;
}

Answer 2

使用.class:not(:hover)过滤所有类别为.class但未悬停的元素