Firefox不会显示由insertRule创建的伪选择器

Question

我的问题只存在于mozilla中（在chrome和opera中，它工作正常）。

HTML：

<div id="map">
  <img src="img/world-map.png" alt="" usemap="#Map" />
    <map name="Map" id="Map">    

    <area number="1" city-display="japan" description="Tokio, Japan" shape="circle" coords="958,306,20" />
    <area number="2" city-display="beijing" description="Beijing, The Great Wall of China" shape="circle" coords="880,290,20" />
    <area number="3" city-display="sydney" description="Sydney,Australia" shape="circle" coords="998,551,20" />
  </map>
</div>

的CSS：

area:hover:before{
content: '';
background-color: rgba(26, 34, 34, 0.7);
color: #ffffff;
border: 1px solid black;
border-radius: 3px;
position: absolute;
z-index: 99;

JS

var style = document.createElement('style');

document.body.appendChild(style);

document.getElementById('map').addEventListener('mouseover',function(x){

    var mouseX = x.pageX;
    var mouseY = x.pageY;
    var map = document.getElementById('map');

    if(x.target && x.target.nodeName == 'AREA'){


        style.sheet.insertRule("area:nth-of-type(" 
            + x.target.getAttribute('number') 
            + "):hover::before{top:" 
            + (mouseY - 25) +"px;" 
            +"left:" + (mouseX -5 ) + "px; " 
            + "content:'" + x.target.getAttribute('description') 
            + "';}",0); 

        this.addEventListener('click',function(){

        style.sheet.insertRule("#" + x.target.getAttribute('city-display') +"{display:block;}",0)

        });


          console.log('dsf');

    }

});

脚本只需从图像映射中获取元素并添加带描述的动态伪元素，因为我注意到它不能仅在单个浏览器中工作 - firefox