html - `` 悬停状态在检查器中有效但在实际浏览器中无效

Question

我遇到了一些 div 的问题，这些 div 应该在悬停时从背景图像更改为背景颜色。如果您尝试运行我在下面发布的代码片段，您会发现它有效，但是我在 www.pieterswebdesign.com/desktop/index.html 上使用了相同的代码。如果我将图片悬停在网站上，什么也不会发生……

此外，当您在检查器中强制悬停状态时，它确实有效... 有人知道这里的问题吗？

#kijker1div {
  width: 55%;
  padding-bottom: 31.5%;
  position: relative;
  float: left;
  margin-right: .5%;
  background-image: url(images/kijker1.png);
  background-size: cover;
  text-align: center;
}
#kijker2div {
  width: 44.5%;
  padding-bottom: 40%;
  position: relative;
  float: left;
  margin-bottom: 1.25%;
  background-image: url(images/kijker2.png);
  background-size: cover;
  background-position: 50%;
  text-align: center;
}
#kijker3div {
  width: 55%;
  padding-bottom: 37%;
  position: relative;
  float: left;
  margin-top: -9.25%;
  margin-right: .5%;
  background-image: url(images/kijker3.png);
  background-size: cover;
  text-align: center;
}
#kijker4div {
  width: 44.5%;
  padding-bottom: 28.5%;
  margin-top: -.75%;
  position: relative;
  float: left;
  background-image: url(images/kijker4.png);
  background-size: cover;
  background-position: 50% 50%;
  text-align: center;
}
#kijker1div:hover {
  background-color: #3498db;
  background-image: none;
}
#kijker2div:hover {
  background-color: #e74c3c;
  background-image: none;
}
#kijker3div:hover {
  background-color: #9b59b6;
  background-image: none;
}
#kijker4div:hover {
  background-color: #1abc9c;
  background-image: none;
}

<div class="wrapper">
  <div id="kijker1div" class="kijkerdiv"></div>
  <div id="kijker2div" class="kijkerdiv"></div>
  <div id="kijker3div" class="kijkerdiv"></div>
  <div id="kijker4div" class="kijkerdiv"></div>


</div>

Answer 1

由于未清除float，以下元素“覆盖”了您的四个图 block ，因此鼠标无法通过。

尝试将overflow:hidden 添加到容器。