Question

我有一个结构：包含image，image map和overlays的容器。它的工作方式如下： 当鼠标悬停在area元素上时，应显示叠加层（位于相同位置）。

但我无法让它发挥作用。叠加似乎总是阻挡区域的hover。

我尝试了什么：

absolute和relative定位于image和map，甚至是areas
将DOM中元素的顺序更改为img＆gt;叠加＆gt;图
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

如果在pointer-events:none中使用，

svg可以在IE10中使用，请查看W3C

所以这是一个在IE10中工作的片段

段

$('area').hover(
  function() {
    $('.overlay').addClass('active');
    console.log("enter");
  },
  function() {
    $('.overlay').removeClass('active');
    console.log("leave");
  }
);

.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);
  pointer-events: none
}
.overlay.active {
  opacity: 1;
}

<script src="https://code.jquery.com/jquery-2.2.0.min.js"></script>
<div class="container">
  <img src="//placehold.it/400" usemap="#map">
  <map name="map">
    <area shape="rect" coords="0, 0, 200, 200" href="#">
  </map>
  <svg class="overlay"></svg>
</div>

Answer 2

只有在不使用jQuery添加活动类的情况下，才能使用CSS实现此目的。 Here is the updated Fiddle.

我已按照您在问题中提供的方式将鼠标悬停在图像上。您可以将类.container修改为您自己的区域标记类。

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

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

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

使用CSS实现叠加比使用js快得多。 CSS vs Jquery Hover.

图像映射无法使用绝对定位的叠加层

2 个答案:

段