如何实现鼠标悬停图片时，页面其余部分应用灰度滤镜？

你当前的CSS有个小问题：悬停状态下写了两次filter属性，后面的Grayscale(0%)会覆盖掉前面的drop-shadow，导致阴影不生效，得把两个滤镜合并成一个声明。

要实现「鼠标悬停图片时，页面其余部分变灰、仅图片保持彩色」的效果，因为CSS没有父选择器，没法直接选中“除图片外的所有元素”，我们可以用一个伪元素覆盖整个页面，默认隐藏，hover图片时让伪元素显示并添加灰度滤镜，同时让图片保持在伪元素上方不受影响。

修改后的完整代码如下：

body {
  position: relative;
}

.img {
  filter: grayscale(100%);
  transition: all 0.3s ease; /* 可选：添加过渡动画让效果更丝滑 */
  position: relative;
  z-index: 2; /* 确保图片在伪元素之上，不受灰度滤镜影响 */
}

/* 鼠标悬停图片时，生成覆盖全屏的灰度伪元素 */
.img:hover::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  filter: grayscale(100%);
  z-index: 1; /* 层级低于图片，高于页面其他内容 */
  pointer-events: none; /* 不影响页面其他元素的点击交互 */
}

/* 鼠标悬停时的图片样式：取消灰度、缩放、添加阴影 */
.img:hover {
  filter: grayscale(0%) drop-shadow(3px 3px #888); /* 替换数值为你需要的参数 */
  transform: scale(1.1); /* 替换为你想要的缩放比例，比如1.1是放大10% */
}

注意事项 #

• 把代码里的示例数值（比如阴影的3px、颜色#888、缩放比例1.1）替换成你实际需要的参数；
• transition属性是为了让样式变化更平滑，不需要的话可以直接删掉；
• 如果你的图片不在最外层容器里，可能需要调整父元素的position和图片的z-index，确保图片能在伪元素上方。

内容的提问来源于stack exchange，提问作者slipoden cider