html - css hover 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; 
}