:hover 在 Chrome 中有效，但不适用于 Firefox

Question

出于某种原因，Firefox 就是不喜欢 ：hover。 但是，这些代码在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想通了。

<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;
}

Answer 2

area 元素不接受 ：hover 选择器，因此您可以使用当前代码实现所需的效果。有几种方法可以使用jQuery Plugin，MapHilight或使用canvas。

看看这些答案[可见区域标签？ 以及如何在 html 区域标签上应用悬停？