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

This looks like it could be more than just a simple `:hover` issue - hover works properly in FF. Note you've got an class selector (`.target`) + an attribute selector (`[data-textboxleft]`) + a pseudo-class selector (`:hover`) + a pseudo-element selector (`:after`) all in the same selector - **on top of** an imagemap - that could be simply too much. — random_user_name, May 20 '16 at 03:01
Also - it would be more useful to see the actual rendered markup, rather than the ASP code. — random_user_name, May 20 '16 at 03:04
Possible duplicate of [How to apply Hovering on html area tag?](http://stackoverflow.com/questions/12661124/how-to-apply-hovering-on-html-area-tag) — TylerH, May 20 '16 at 06:03
Here is a jsfiddle https://jsfiddle.net/hc6d2xx3/22/ *adjusted the coordinates for picture's size.* — Evilmuffin, May 20 '16 at 13:33
If you open the above link on Chrome, everything works as intented (mouse over the center town and the small village above the town). If you open it on FF, it doesn't work. — Evilmuffin, May 20 '16 at 13:40

score 1 · Accepted Answer · answered May 26 '16 at 19:32

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

score 0 · Answer 2 · edited May 23 '17 at 12:07

0

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?

edited May 23 '17 at 12:07

Community

1
1

answered May 20 '16 at 04:20

Leo Farmer

7,730
5
31
47

Errrgh...I'm afraid of that :/ I actually have a JavaScript from mapper.js that highlight the tag. I just need that extract text box appear on the upper left corner of the map. Why is that Chrome is the only working exception? – Evilmuffin May 20 '16 at 13:35

:hover works in Chrome but not Firefox

2 Answers2