是否可以使用 CSS 在图像地图上设置鼠标悬停样式？

Question

我在网页上有一张图片也需要链接。我正在使用图像映射来创建链接，我想知道是否有一种方法可以在鼠标悬停时设置区域形状的样式以实现轻微的交互性。这可能吗？

我尝试了这个但没有成功：

网页格式

<img src="{main_photo}" alt="locations map"  usemap="#location-map" />
<map name="location-map">
    <area shape="rect" coords="208,230,290,245" href="{site_url}locations/grand_bay_al" />
    <area shape="rect" coords="307,214,364,226" href="{site_url}locations/mobile_al" />
    <area shape="rect" coords="317,276,375,290" href="{site_url}locations/loxley_al" />
</map>

CSS

 area { border: 1px solid #d5d5d5; }

有什么建议么？

原文由 forrest 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

仅限 CSS：

在去超市的路上想想，你当然也可以跳过整个图像映射的想法，并在图像顶部的元素上使用 :hover （将 div 更改为 a-blocks） .这让事情变得简单得多，不需要 jQuery ……

简短说明：

• 图片在底部
• 2 xa with display:block and absolute positioning + opacity:0
• 悬停时将不透明度设置为 0.2

例子：

 .area {
    background:#fff;
    display:block;
    height:475px;
    opacity:0;
    position:absolute;
    width:320px;
}
#area2 {
    left:320px;
}
#area1:hover, #area2:hover {
    opacity:0.2;
}

 <a id="area1" class="area" href="#"></a>
<a id="area2" class="area" href="#"></a>
<img src="http://upload.wikimedia.org/wikipedia/commons/thumb/2/20/Saimiri_sciureus-1_Luc_Viatour.jpg/640px-Saimiri_sciureus-1_Luc_Viatour.jpg" width="640" height="475" />

使用 jQuery 的原始答案

我刚刚用 jQuery 创建了一些类似的东西，我认为它不能只用 CSS 来完成。

简短说明：

• 图片在底部
• 具有绝对定位 + 显示的翻转（图像或颜色）的 Div：无
• 带有实际 #map 的透明 gif 位于顶部（绝对位置）（防止调用 mouseout 出现翻转时）
• jQuery 用于显示/隐藏 div

 $(document).ready(function() {
  if ($('#location-map')) {
    $('#location-map area').each(function() {
      var id = $(this).attr('id');
      $(this).mouseover(function() {
        $('#overlay' + id).show();

      });

      $(this).mouseout(function() {
        var id = $(this).attr('id');
        $('#overlay' + id).hide();
      });

    });
  }
});

 body,
html {
  margin: 0;
}

#emptygif {
  position: absolute;
  z-index: 200;
}

#overlayr1 {
  position: absolute;
  background: #fff;
  opacity: 0.2;
  width: 300px;
  height: 160px;
  z-index: 100;
  display: none;
}

#overlayr2 {
  position: absolute;
  background: #fff;
  opacity: 0.2;
  width: 300px;
  height: 160px;
  top: 160px;
  z-index: 100;
  display: none;
}

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<img src="http://www.tfo.be/jobs/axa/premiumplus/img/empty.gif" width="300" height="350" border="0" usemap="#location-map" id="emptygif" />
<div id="overlayr1">&nbsp;</div>
<div id="overlayr2">&nbsp;</div>
<img src="http://2.bp.blogspot.com/_nP6ESfPiKIw/SlOGugKqaoI/AAAAAAAAACs/6jnPl85TYDg/s1600-R/monkey300.jpg" width="300" height="350" border="0" />
<map name="location-map" id="location-map">
  <area shape="rect" coords="0,0,300,160" href="#" id="r1" />
  <area shape="rect" coords="0,161,300,350" href="#" id="r2"/>
</map>

希望能帮助到你..

原文由 ptriek 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

带有伪元素。

HTML:

 <div class="image-map-container">
    <img src="https://upload.wikimedia.org/wikipedia/commons/8/83/FibonacciBlocks.png" alt="" usemap="#image-map" />
    <div class="map-selector"></div>
</div>

<map name="image-map" id="image-map">
    <area alt="" title="" href="#" shape="rect" coords="54,36,66,49" />
    <area alt="" title="" href="#" shape="rect" coords="72,38,83,48" />
    <area alt="" title="" href="#" shape="rect" coords="56,4,80,28" />
    <area alt="" title="" href="#" shape="rect" coords="7,7,45,46" />
    <area alt="" title="" href="#" shape="rect" coords="10,59,76,125" />
    <area alt="" title="" href="#" shape="rect" coords="93,9,199,122" />
</map>

一些 CSS：

 .image-map-container {
    position: relative;
    display:inline-block;
}
.image-map-container img {
    display:block;
}
.image-map-container .map-selector {
    left:0;top:0;right:0;bottom:0;
    color:#546E7A00;
    transition-duration: .3s;
    transition-timing-function: ease-out;
    transition-property: top, left, right, bottom, color;
}
.image-map-container .map-selector.hover {
    color:#546E7A80;
}

.map-selector:after {
    content: '';
    position: absolute;
    top: inherit;right: inherit;bottom: inherit;left: inherit;
    background: currentColor;
    transition-duration: .3s;
    transition-timing-function: ease-out;
    transition-property: top, left, right, bottom, background;
    pointer-events: none;
}

记者：

 $('#image-map area').hover(
    function () {
        var coords = $(this).attr('coords').split(','),
            width = $('.image-map-container').width(),
            height = $('.image-map-container').height();
        $('.image-map-container .map-selector').addClass('hover').css({
            'left': coords[0]+'px',
            'top': coords[1] + 'px',
            'right': width - coords[2],
            'bottom': height - coords[3]
        })
    },
    function () {
        $('.image-map-container .map-selector').removeClass('hover').attr('style','');
    }
)

https://jsfiddle.net/79ebt32x/1/

原文由 clm 发布，翻译遵循 CC BY-SA 3.0 许可协议