title: Is it possible to remove a portion of a CSS hover overlay when hovering over a child element?
body: <p>I am faking an image map by using <a href="http://webpresencepartners.com/tools/css-image-map-generator/" rel="nofollow noreferrer">CSS Image Map Generator</a>. When the user hovers over the outer image, I want the entire image to darken a little and have a border appear around the hot spots. When they hover over a hotspot, I want that hotspot to be undarkened. Is this even possible?</p>
  
  <ol>
  <li>This image shows a box containing an image of a product interface - removed for security purposes - inside it (via CSS background-image). The user is not hovering over it right now. No visible hotspots, no image overlay.</li>
  <li>This image shows a user hovering over a portion of the "outer" image. The image has a transparent overlay (black, 45% opacity) applied and the image map hotspots become visible.</li>
  <li>This image shows a user hovering over a hotspot.</li>
  </ol>
  
  <p><img src="https://i.stack.imgur.com/RomYz.png" alt="un-hover">
  <img src="https://i.stack.imgur.com/pfVq2.png" alt="outer-hover">
  <img src="https://i.stack.imgur.com/oqVDU.png" alt="enter image description here"></p>
  
  <p>When they hover over the hotspot, I'd like the hotspot area of the parent hover overlay to be removed. Is that possible? I'll accept any demonstrable solution. Javascript/jQuery is fine.</p>
  
  <p><strong>HTML:</strong></p>
  
  <pre><code>&lt;div class="map_image"&gt;
            &lt;div class="overlay"&gt;
                  &lt;a class="map_link" id="map_link_0" href="dp"&gt;&lt;/a&gt;
                  &lt;a class="map_link" id="map_link_1" href="a"&gt;&lt;/a&gt;
                  &lt;a class="map_link" id="map_link_2" href="s"&gt;&lt;/a&gt;
                  &lt;a class="map_link" id="map_link_3" href="ab"&gt;&lt;/a&gt;
                  &lt;a class="map_link" id="map_link_4" href="ch"&gt;&lt;/a&gt;
                  &lt;a class="map_link" id="map_link_5" href="ai"&gt;&lt;/a&gt;
                  &lt;a class="map_link" id="map_link_6" href="al"&gt;&lt;/a&gt;
                  &lt;a class="map_link" id="map_link_7" href="as"&gt;&lt;/a&gt;
                  &lt;a class="map_link" id="map_link_8" href="o"&gt;&lt;/a&gt;
                  &lt;a class="map_link" id="map_link_9" href="pc"&gt;&lt;/a&gt;
                  &lt;a class="map_link" id="map_link_10" href="wi"&gt;&lt;/a&gt;
                  &lt;a class="map_link" id="map_link_11" href="c"&gt;&lt;/a&gt;
                  &lt;a class="map_link" id="map_link_12" href="pq"&gt;&lt;/a&gt;
            &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>CSS:</strong></p>
  
  <pre><code>.map_image { display: block; width: 200px; height: 596px; position: relative; border: 1px solid gray; }
  
  .map_image .map_link { display: block; position: absolute; text-indent: -999em; overflow: hidden; border: 2px solid orange; }
  
  .map_image #map_link_0 { top: 106px; left: 20px; }
  .map_image #map_link_1 { top: 106px; left: 79px; }
  .map_image #map_link_2 { top: 106px; left: 138px; }
  .map_image #map_link_3 { top: 160px; left: 20px; }
  .map_image #map_link_4 { top: 160px; left: 79px; }
  .map_image #map_link_5 { top: 160px; left: 138px; }
  .map_image #map_link_6 { width: 30px; height: 27px; top: 0px; right: 0px; }
  .map_image #map_link_7 { width: 196px; height: 27px; top: 33px; left: 0px; }
  .map_image #map_link_8 { bottom: 2px; left: 6px; }
  .map_image #map_link_9 { bottom: 2px; left: 43px; }
  .map_image #map_link_10 { bottom: 2px; left: 80px; }
  .map_image #map_link_11 { bottom: 2px; left: 117px; }
  .map_image #map_link_12 { bottom: 2px; left: 155px; }
  
  #map_link_8, #map_link_9, #map_link_10, #map_link_11, #map_link_12 { height: 30px; width: 30px;}
  
  #map_link_0, #map_link_1, #map_link_2, #map_link_3, #map_link_4, #map_link_5 { width: 37px; height: 37px; border-radius: 5px; }
  
  .overlay {  background:rgba(0,0,0,.45); width: 200px; height: 596px; opacity:0; -webkit-transition: opacity .25s ease; -moz-transition: opacity .25s ease;}
  
  .map_image:hover .overlay { opacity:1; }
  </code></pre>