图像映射不适用于绝对定位的叠加层

Question

我有一个类似的结构：一个带有image、image map 和overlays 的容器。它应该像这样工作：当悬停在 area-元素上时，应该会显示一个叠加层（在同一位置）。

但我无法让它工作。似乎覆盖层总是挡住hover 的区域。

我尝试过的：

• absolute 和 relative 定位在 image 和 map 甚至 areas
• 将 DOM 中元素的顺序更改为 img > overlay > map
• z-indexes 的所有变体

我该如何解决这个问题？

注意：我不能用pointer-events: none来解决它，因为我需要支持IE10。

这是一个简化的例子：

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.

Answer 1

您可以仅使用 CSS 来实现这一点，而无需使用 jQuery 添加活动类。 Here is the updated Fiddle.

正如您在问题中提供的那样，我已将鼠标悬停在图像上。您可以将.container 类修改为您自己的区域标签类。

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

如果你想通过 CSS 实现同级元素的悬停效果，你可以在你的地图元素中添加一个类，然后添加这个 css。

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

使用CSS实现overlay比js做的快很多。 CSS vs Jquery Hover.