Question

我遇到一些div的问题，这些div应该在悬停时从背景图像变为背景颜色。如果您尝试运行我在下面发布的代码，您会发现它有效，但我在www.pieterswebdesign.com/desktop/index.html上使用相同的代码，如果我将图像悬停在网站上没有任何反应......

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

＆＃13;

#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;
}

＆＃13;

<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>

＆＃13;

Answer 1

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

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

Answer 2

#kijkerdivtxt1 div与包装图像的上述包装类重叠（因为包装器高度不等于其子元素），这阻止了悬停事件的触发。

您可以为包装类

设置任何一个属性

.wrapper {
    display: inline-block;
    overflow: hidden;
}

``悬停状态在检查器中工作，但在实际浏览器中不起作用

2 个答案: