显示/隐藏在Jquery图像映射上的工作不一致

Question

I'm working on an imagemap that not only is hi-lighted, but also does a show/hide on a some additional information on a Drupal site:

http://dev-wateraid.pantheonsite.io/where-we-work

If you hover over countries like Canada you'll see the DIV show up, but if you hover over the United States the area is hi-lighted but it doesn't trigger the show/hide -- similar with Sierra Leone, South Africa, the UK, Papua New Guinea, and a few others.

The code I'm using to do the show hide is:

$('area').on({
   mouseover : function(e){
   var $this = $(this),
   $office = $('#'+$this.prop('alt'));
   $($office).removeClass("hidden");
},
   mouseout : function(e){
   var $this = $(this),
   $office = $('#'+$this.prop('alt'));
   $($office).addClass("hidden");
}
});

The image map holds the alt tag which is then used to show/hide a div:

<area coords="96,67,97,61,76,40,69,45,55,36,55,-20,-4,-31,-40,-15,-41,-12,-20,0,-23,3,-31,2,-31,-1,-47,5,-39,11,-27,11,-20,9,-19,16,-29,21,-33,19,-39,29,-35,33,-37,36,-29,40,-25,38,-23,41,-23,46,-17,44,-12,47,-5,45,-7,52,-35,68,-33,69,-14,61,9,45,5,43,16,32,14,43,29,38,30,34,34,33,45,38,58,40,59,40,60,41,71,48,79,59,81,57,87,67,90,66" shape="poly" href="/" alt="United States">

This is the div that would be toggled to be show with the United States information.

<table class="hidden" id="United States">
<tbody><tr valign="top">
<td>
<a href="/countries/united-states"><img width="64" height="64" alt=""     src="http://dev-wateraid.pantheonsite.io/sites/default/files/flags/United-States.png" typeof="foaf:Image"></a>
 </td>
 <td>
 <h3>United States</h3>
 The America team helps to coordinate and fund operations across our country programs, with Nicaragua a particular focus.
 </td>
 </tr>
 </tbody></table>

I keep looking for reasons most of the countries might work but others wouldn't -- spelling is consistent -- I don't believe there are any hidden characters.

I've validated the code as much as I could, but I just can't see it.

Answer 1

I believe the issue may be the space in the "id", for example

id="United States"

may actually be interpreted as

id="United"

Answer 2

jQuery selector can't handle "#United States"... It pretty much ignores the "States". So if you really need the ID to be "United States" you can use:

$("[id='"+$this.attr('alt')+"']")

Or you can just change the 'alt' and 'id' to "UnitedStates".