css - 使用 CSS 取消悬停时的图像模糊

Question

到目前为止，这是我的代码:

.card {
  width: 300px;
  height: 200px;
  float: left;
  margin: 10px;
  border-radius: 15px;
  background-color: rgba(0, 0, 0, 0.5);
  overflow: hidden;
}

.card .cover-image {
  position: relative;
  width: 100%;
  height: 100%;
  z-index: -1;
  filter: blur(8px);
  transition: filter 0.25s linear;
}

.card .cover-image:hover {
  filter: blur(0);
}

<div class="card">
  <img class="cover-image" src="https://www.w3schools.com/css/rock600x400.jpg">
</div>
<div class="card">
  <img class="cover-image" src="https://www.w3schools.com/css/paris.jpg">
</div>
<div class="card">
  <img class="cover-image" src="https://www.w3schools.com/bootstrap4/newyork.jpg">
</div>
<div class="card">
  <img class="cover-image" src="https://www.w3schools.com/bootstrap4/sanfran.jpg">
</div>

但是，当我将鼠标悬停在图像上时，它们不会模糊。我认为这是因为封面图片上的 z-index。这个问题有什么解决方法吗？

谢谢。

Answer 1

你应该试试

.card:hover .cover-image{
  filter: blur(0);
}

因为您实际上将鼠标悬停在 img 的父级上