Evilmuffin Evilmuffin - 6 months ago 8
HTML Question

:hover works in Chrome but not Firefox

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

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