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中，并在将鼠标悬停在checkboxes而不是{上时显示div {1}}。

img

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