Html css悬停div闪烁

嗯，我的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>

当我在图像上悬停时，它工作正常，两个复选框可见，当我在复选框上悬停时问题开始出现，它开始闪烁 我无法理解这里的错误情况

当我将光标移动到黑色are（即

hoverDisplay

class）时，它开始闪烁，我无法选中任何复选框。当我搬家的时候

---

仅仅是因为当您想将输入作为使用时，将丢失悬停，因此您不再悬停图像，而是另一个元素，它是同级元素。要避免此情况，请添加另一个属性以保持

显示：块

状态：

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

---

问题是当您将鼠标悬停在图像上时，会显示

复选框。然后，当您将复选框悬停（因为它们不在图像中（它们不可能在图像中））时，您将图像悬停在外，css试图隐藏它们。但是
复选框
位于图像顶部，因此会发生闪烁

你基本上是在同一时间在图像中来回徘徊

一种解决方案是将
img
和
复选框包装在
div
中，并在将鼠标悬停在
div
上时显示
复选框，而不仅仅是
img


.img容器{
位置：相对位置；
宽度：350px；
}
.悬停显示器{
高度：75px；
字体大小：0.80rem；
背景色：rgba（44,44,44,0.3）；
背景：rgba（44,44,44,0.3）；
颜色：#ffffff；
宽度：95%；
底部：8px；
位置：绝对位置；
填充物：2px 5px；
显示：无；
}
.hoverDisplay.selctImgInptWrapper{
底部：50px；
位置：绝对位置；
填充物：2px 5px；
}
.悬停显示。选择WrapperImgretouch{
底部：30px；
位置：绝对位置；
填充物：2px 5px；
}
.img容器：悬停。悬停显示{
显示：块；
}
提供一把小提琴或一个片段来轻松重现这一点将是一个很大的帮助。
.itemImage:hover ~ .hoverDisplay,
 .hoverDisplay:hover {
  display: block; 
}