Is it possible to remove a portion of a CSS hover overlay when hovering over a child element?

Question

I am faking an image map by using CSS Image Map Generator . 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?

1. 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.
2. 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.
3. This image shows a user hovering over a hotspot.

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.

HTML:

<div class="map_image">
          <div class="overlay">
                <a class="map_link" id="map_link_0" href="dp"></a>
                <a class="map_link" id="map_link_1" href="a"></a>
                <a class="map_link" id="map_link_2" href="s"></a>
                <a class="map_link" id="map_link_3" href="ab"></a>
                <a class="map_link" id="map_link_4" href="ch"></a>
                <a class="map_link" id="map_link_5" href="ai"></a>
                <a class="map_link" id="map_link_6" href="al"></a>
                <a class="map_link" id="map_link_7" href="as"></a>
                <a class="map_link" id="map_link_8" href="o"></a>
                <a class="map_link" id="map_link_9" href="pc"></a>
                <a class="map_link" id="map_link_10" href="wi"></a>
                <a class="map_link" id="map_link_11" href="c"></a>
                <a class="map_link" id="map_link_12" href="pq"></a>
          </div>
</div>

CSS:

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

Answer 1

CBroe's comment is what did the trick. On hover of the link elements, set the background to be the original image, positioned adequately to show the original location behind the link area (accounting for border sizes).

Here's a JSFiddle with the result (apparently posting Codepen is a nono).

 .map_image { display: block; width: 200px; height: 596px; position: relative; background: url('https://media.licdn.com/mpr/mpr/p/6/005/086/004/186c3f8.jpg') top left no-repeat; 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: all .25s ease; } .map_image:hover .overlay { opacity:1; } #map_link_0:hover { background: url('https://media.licdn.com/mpr/mpr/p/6/005/086/004/186c3f8.jpg') -22px -108px, top left no-repeat; } #map_link_1:hover { background: url('https://media.licdn.com/mpr/mpr/p/6/005/086/004/186c3f8.jpg') -81px -108px, top left no-repeat; } #map_link_2:hover { background: url('https://media.licdn.com/mpr/mpr/p/6/005/086/004/186c3f8.jpg') -140px -108px, top left no-repeat; } #map_link_3:hover { background: url('https://media.licdn.com/mpr/mpr/p/6/005/086/004/186c3f8.jpg') -22px -162px, top left no-repeat; } #map_link_4:hover { background: url('https://media.licdn.com/mpr/mpr/p/6/005/086/004/186c3f8.jpg') -81px -162px, top left no-repeat; } #map_link_5:hover { background: url('https://media.licdn.com/mpr/mpr/p/6/005/086/004/186c3f8.jpg') -140px -162px, top left no-repeat; } 

 <h1>Interface</h1> <p>Hover over the image below for cool stuff.</p> <div class="map_image"> <div class="overlay"> <a class="map_link" id="map_link_0" href="pd"></a> <a class="map_link" id="map_link_1" href="a"></a> <a class="map_link" id="map_link_2" href="s"></a> <a class="map_link" id="map_link_3" href="ab"></a> <a class="map_link" id="map_link_4" href="ch"></a> <a class="map_link" id="map_link_5" href="ai"></a> <a class="map_link" id="map_link_6" href="al"></a> <a class="map_link" id="map_link_7" href="as"></a> <a class="map_link" id="map_link_8" href="o"></a> <a class="map_link" id="map_link_9" href="pc"></a> <a class="map_link" id="map_link_10" href="wi"></a> <a class="map_link" id="map_link_11" href="c"></a> <a class="map_link" id="map_link_12" href="pq"></a> </div> </div> 

Answer 2

So if I understand your question you want the orange border removed when the user hovers over the specific element? If so you can do that by updating your CSS like this:

.map_image .map_link:hover {
     border: 2px solid transparent;
}

Once the hover is initiated the border will still be 2px and invisible.

Answer 3

Try

$(".overlay .map_link")
.on({
    mouseover: function(e) {      
        $(this).css("background-color", "#fff")
    }
  , mouseleave:function(e) {
        $(this).css("background","transparent")
    }
})

jsfiddle http://jsfiddle.net/05q8zLsr/3/

 $(".overlay .map_link") .on({ mouseover: function(e) { $(this).css("background-color", "#fff") } , mouseleave:function(e) { $(this).css("background","transparent") } }) 

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

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <h1>Interface</h1> <p>Hover over the image below for stuff.</p> <div class="map_image"> <div class="overlay"> <a class="map_link" id="map_link_0" href="dp"></a> <a class="map_link" id="map_link_1" href="a"></a> <a class="map_link" id="map_link_2" href="s"></a> <a class="map_link" id="map_link_3" href="ab"></a> <a class="map_link" id="map_link_4" href="ch"></a> <a class="map_link" id="map_link_5" href="ai"></a> <a class="map_link" id="map_link_6" href="al"></a> <a class="map_link" id="map_link_7" href="as"></a> <a class="map_link" id="map_link_8" href="o"></a> <a class="map_link" id="map_link_9" href="pc"></a> <a class="map_link" id="map_link_10" href="wi"></a> <a class="map_link" id="map_link_11" href="c"></a> <a class="map_link" id="map_link_12" href="pq"></a> </div> </div>