：ホバーはChromeでは動作するがFirefoxでは動作しない

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を使ってそれを考え出し[これらの答えを見てください。

<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

面積要素は受け付けません。 jQuery Plugin、MapHilight、キャンバスを使用する方法はいくつかあります。

はVisible Area tag?とHow to apply Hovering on html area tag?