CSS鼠标悬浮图片模糊切换效果

要实现鼠标悬浮图片模糊切换效果，可以使用CSS的filter属性来实现模糊效果，并结合:hover伪类来实现悬浮切换。以下是一个简单的示例：

HTML:

<div class="image-container">
  <img src="image1.jpg" alt="Image 1">
  <img src="image2.jpg" alt="Image 2">
</div>

CSS:

.image-container {
  position: relative;
  width: 300px;
  height: 200px;
  overflow: hidden;
}
 
.image-container img {
  position: absolute;
  width: 100%;
  height: 100%;
  transition: filter 0.5s ease;
  filter: blur(3px);
}
 
.image-container img:first-child {
  filter: blur(0);
}
 
.image-container:hover img {
  filter: blur(3px);
}
 
.image-container:hover img:first-child {
  filter: blur(0);
}

这段代码会创建一个容器，其中包含两张图片。默认情况下，第一张图片没有模糊效果，而其他图片有3像素的模糊效果。当鼠标悬浮在容器上时，图片会切换，触发模糊效果的变化。