css悬浮div闪烁

Question

嗯，我的HTML看起来是这样的，当我悬停在图像上时，两个带有黑色背景的复选框应该是可见的。

<img class='itemImage'/>
 <div class='hoverDisplay'> 
  <div class="selctImgInptWrapper big">
    <input class="selctImgInpt" type="checkbox" value="">
  </div>
  <div class="selectWrapperImgRetouch big">
    <input class="selctImgRetouch" type="checkbox" value="">
  </div>
</div>

我的CSS

.hoverDisplay {
 height: 75px;
 font-size: 0.80rem;
 background-color: rgba(44, 44, 44, 0.3);
 background: rgba(44, 44, 44, 0.3);
 color: #ffffff;
 width: 95%;
 bottom: 8px;
 position: absolute;
 padding: 2px 5px;
 display: none; }

.hoverDisplay .selctImgInptWrapper {
 bottom: 50px;
 position: absolute;
 padding: 2px 5px;
}

.hoverDisplay .selectWrapperImgRetouch {
 bottom: 30px;
 position: absolute;
 padding: 2px 5px; }

.itemImage:hover ~ .hoverDisplay {
  display: block; }

当我在图像上悬停时，它工作得很好，这两个复选框是可见的，当我在复选框上悬停时，问题就开始了--它开始闪烁--我无法在这里找出错误的场景。

当我将光标移到黑色的是hoverDisplay类时，它会开始闪烁，我无法选中任何复选框。同时移动我的

​

​

Answer 1

简单地说，当您想要将输入作为使用时，您将失去悬停状态，所以不再悬停图像，而是另一个元素，即同级元素。要避免这种情况，请添加另一个属性以保持display:block状态：

.itemImage:hover ~ .hoverDisplay,
 .hoverDisplay:hover {
  display: block; 
}

Answer 2

问题是，当您悬停在图像上时，就会显示checkboxes。然后，当您悬停复选框(因为它们不在图像中(它们是不可能的)，您悬停在图像和css试图隐藏他们。但是checkboxes在图像的顶部，所以会发生闪烁。

你基本上是在同一时间内悬停在图像内外。

一种解决方案是将img和checkboxes封装在div中，当您悬停在div (而不仅仅是img )上时，显示checkboxes。

​

.img-container {
  position:relative;
  width:350px;
}

.hoverDisplay {
  height: 75px;
  font-size: 0.80rem;
  background-color: rgba(44, 44, 44, 0.3);
  background: rgba(44, 44, 44, 0.3);
  color: #ffffff;
  width: 95%;
  bottom: 8px;
  position: absolute;
  padding: 2px 5px;
  display: none;
}

.hoverDisplay .selctImgInptWrapper {
  bottom: 50px;
  position: absolute;
  padding: 2px 5px;
}

.hoverDisplay .selectWrapperImgRetouch {
  bottom: 30px;
  position: absolute;
  padding: 2px 5px;
}

.img-container:hover .hoverDisplay {
  display: block;
}

<div class="img-container">
<img class="itemImage" src="http://via.placeholder.com/350x150">
<div class='hoverDisplay'>
  <div class="selctImgInptWrapper big">
    <input class="selctImgInpt" type="checkbox" value="">
  </div>
  <div class="selectWrapperImgRetouch big">
    <input class="selctImgRetouch" type="checkbox" value="">
  </div>
</div>
</div>

​