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的父项上

Answer 2

您是正确的，原因是z-index引起了此问题（尝试删除该行，您会看到它起作用）。这是因为图像现在位于包含图像的透明<div id="quiz-time-left"> </div> <form name="form" id="questions" onsubmit="return score()"> <h3>1. How many yellow cards equal a red card in football?</h3> <input type="radio" name="q1" value="a">a. 1<br> <input type="radio" name="q1" value="b">b. 2<br> <input type="radio" name="q1" value="c">c. 3<br> <input type="radio" name="q1" value="d">d. 4<br> <h3>1. How many yellow cards equal a red card in football?</h3> <input type="radio" name="q2" value="a">a. 1<br> <input type="radio" name="q2" value="b">b. 2<br> <input type="radio" name="q2" value="c">c. 3<br> <input type="radio" name="q2" value="d">d. 4<br> <h3>1. How many yellow cards equal a red card in football?</h3> <input type="radio" name="q3" value="a">a. 1<br> <input type="radio" name="q3" value="b">b. 2<br> <input type="radio" name="q3" value="c">c. 3<br> <input type="radio" name="q3" value="d">d. 4<br> <br> <input type="submit" id="sendA" value="Submit"> <br> <p id="p"></p> </form>的“后面”，所以悬停事件仅适用于父级。如果您需要z-index，则可以将父元素定位为悬停检测。只需将div替换为.card .cover-image:hover。

使用CSS在悬停时取消模糊图像

2 个答案: