Question

由于某种原因，Firefox不喜欢：悬停。但这些代码在Chrome中运行良好。

HTML：

<div class="map">
  <%= image_tag("worldmap.png", :usemap => "#worldmap", :class => "mapper") %>
  <map name="worldmap">
    <area shape="rect" coords="505,244,546,278" class="target" data-textboxleft="Text 1">
    <area shape="rect" coords="481,189,503,207" class="target" data-textboxleft="Text 2">
  </map>
</div>

CSS：

.target[data-textboxleft]:hover:after {
  content: attr(data-textboxleft);
  background: rgba(0,0,0,0.5);
  color: white;
  font-family: Papyrus;
  font-size: 16px;
  font-style: oblique;
  height: 50px;
  width: 180px;
  position: absolute;
  text-align: center;
  padding-top: 12px;
  left: 0;
  top: 0;
}

Answer 1

区域元素不接受：悬停选择器，因此您可以使用当前代码获得所需的效果。有几种方法可以使用jQuery Plugin，MapHilight或使用canvas。

查看这些答案[Visible Area tag?和How to apply Hovering on html area tag?

Answer 2

我最终使用jQuery来解决它。

<script>
  $(document).ready(function(){
      $("area").mouseover(function(){
          $("#boxleft").fadeIn(0);
          document.getElementById("boxleft").innerHTML = $(this).data('name')  
      });
      $("area").mouseout(function(){
          $("#boxleft").fadeOut(0);
      })
  });
</script>

<div class="map">
  <%= image_tag("worldmap.png", :usemap => "#worldmap", :class => "mapper") %>
  <map name="worldmap">
    <area shape="rect" coords="505,244,546,278" class="target" data-name="Text 1">
    <area shape="rect" coords="481,189,503,207" class="target" data-name="Text 2">
    <span id="boxleft"></span>
  </map>
</div>

的CSS：

#boxleft {
  display: none;
  background: rgba(0,0,0,0.5);
  color: white;
  font-family: Papyrus;
  font-size: 14px;
  font-style: oblique;
  opacity: 1;
  height: 50px;
  width: 180px;
  position: absolute;
  text-align: center;
  padding-top: 12px;
  left: 0;
  top: 0;
  border: 2px solid $gray-lighter;
}

：hover适用于Chrome，但不适用于Firefox

2 个答案: