:hover works in Chrome but not Firefox

Question

For some reason Firefox just doesn't like :hover. The codes work fine in Chrome however.

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

The area element doesn't accept the :hover selector, so you achieve the effect you want with your current code. There are a couple of ways around it using jQuery Plugin, MapHilight or using canvas.

Have a look at these answers [ Visible Area tag? and How to apply Hovering on html area tag?

Answer 2

I eventually figured it out using 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;
}