title: Disable hover on specific div
body: <p>When I hover over my #icon div, an image appears. When I remove the mouse from #icon the image disappears. </p>
  
  <p><strong>THE PROBLEM</strong></p>
  
  <p>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.</p>
  
  <p>I need to remove all hover effects on my <code>#image-divs</code></p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;div id="box"&gt;
      &lt;div id="icons1"&gt;
          &lt;div id="image1"&gt;&lt;/div&gt;
      &lt;/div&gt;
      &lt;div id="icons2"&gt;
          &lt;div id="image2"&gt;&lt;/div&gt;
      &lt;/div&gt;
      &lt;div id="icons3"&gt;
          &lt;div id="image3"&gt;&lt;/div&gt;
      &lt;/div&gt;
      &lt;div id="icons4"&gt;
          &lt;div id="image4"&gt;&lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>CSS EXAMPLE</strong></p>
  
  <pre><code>#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;
  }
  </code></pre>