Html 禁用特定div上的悬停

当我将鼠标悬停在#icon div上时，会出现一个图像。当我从#图标中取出鼠标时，图像消失

问题

如果我将鼠标悬停在图像将出现的空间上，如果我将鼠标悬停在#图标上，图像将出现。我什么都试过了，所以我真的希望你能帮我

我需要删除我的

#图像div上的所有悬停效果

HTML

<div id="box">
    <div id="icons1">
        <div id="image1"></div>
    </div>
    <div id="icons2">
        <div id="image2"></div>
    </div>
    <div id="icons3">
        <div id="image3"></div>
    </div>
    <div id="icons4">
        <div id="image4"></div>
    </div>
</div>

---

使用

指针事件：无

div{指针事件：无}
div:hover{color:red；}

---

将鼠标悬停在我上方

请注意，要在使用id时为每个div指定每个悬停，需要为每个div指定悬停效果，现在应使用以下命令：

#image1{
display:none;
}

#icons1:hover #image1
display:block;
}

这意味着，无论何时悬停icon1，都将显示image1，依此类推

---

你也可以试试opacty:0；不透明度：1

最好的方法是使用

指针事件：无

#image-divs{
   pointer-events:none;
}

添加一个工作演示或小提琴
#image-divs{
   pointer-events:none;
}