Disable hover on specific div

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