Disable hover on specific div - html

Question

When I hover over my #icon div, an image appears. When I remove the mouse from #icon the image disappears.
THE PROBLEM
If I hover over the space where the image will appear if I hover over #icon, the image appears. I've tried anything, so I really hope you can help.
I need to remove all hover effects on my #image-divs
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>
CSS EXAMPLE
#box #icons1 #billede1 {
height: 450px;
width: 1000px;
margin-left: -186%;
margin-top: 150px;
background-image: url(../html_css/billeder/1.jpeg);
background-position: center;
background-size: cover;
opacity: 0.0;
transition: opacity 0.5s ease-in-out;
-moz-transition: opacity 0.5s ease-in-out;
-webkit-transition: opacity 0.5s ease-in-out;
}

Answer 1

Use pointer-events:none
div{pointer-events:none}
div:hover{color:red;}
<div>Hover over me</div>

Answer 2

best way is to use pointer-events:none;
#image-divs{
pointer-events:none;
}

Answer 3

Notice that you to specify every hover for every div while you are using id's, you need to specify the hover effect for every div, now you should use this :
#image1{
display:none;
}
#icons1:hover #image1
display:block;
}
this means, whenever you hover the icon1, image1 will be displayed, and so.
you can also try the opactiy:0; and opacity:1;