1

I have a strcuture like: A container with an image, an image map and overlays. It should work like: While hovering over an area-element an overlay (at the very same position) should be shown.

But I can't get it to work. It seems that the overlay is always blocking the hover of the areas.

What I've tried:

  • absolute and relative positioning on the image and map and even the areas
  • changing the order of elements in the DOM to img > overlay > map
  • all variations of z-indexes

How can I solve this problem?

Note: I can't use pointer-events: none which would solve it, cause I need to support IE10.

Here's a simplified example:

HTML

<div class="container">
    <img src="//placehold.it/400" usemap="#map">
    <map name="map">
        <area shape="rect" coords="0, 0, 200, 200" href="">
    </map>
    <div class="overlay"></div>
</div>

CSS

.container {
    position: relative;
    width: 400px;
    height: 400px;
}

map {
    position: relative;
    z-index: 1000;
}

.overlay {
    opacity: 0;
    position: absolute;
    z-index: 500;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
}

.overlay.active {
    opacity: 1;
}

JavaScript

$('areas').hover(
    function() {
        var e = $(this);
        $('.overlay').addClass('active');
        consoloe.log("enter");
      },
    function() {
        $('.overlay').removeClass('active');
        consoloe.log("enter");
    }
);

jsFiddle

You can try it here.

lampshade
  • 2,470
  • 3
  • 36
  • 74

1 Answers1

0

You can achieve this with CSS only without adding the active class with jQuery. Here is the updated Fiddle.

I have targeted the hover on image as you have provided in your question. You can modify the class .container to your own class of area tag.

.image-className:hover .overlay {
    opacity: 1;
  }

If you want to achieve hover effect of same level element through CSS you can add a class to your map element and then add this css.

 .map-ClassName:hover + .overlay{
      opacity:1;     
}

Using CSS to achieve the overlay is much faster then doing it by js. CSS vs Jquery Hover.

Community
  • 1
  • 1
AmitJS94
  • 1,202
  • 12
  • 22