Наклонная карта области скрыта за элементами DIV

Question

У меня есть изображение человеческого тела. На изображении я плаваю ключевые точки, которые показывают области, которые можно выбрать

, а затем я использую карту области, где я могу навести курсор и выбрать точки.

Проблема заключается в том, что теги '', по-видимому, находятся над тегами '', поэтому, если вы попытаетесь навести курсор на карту, биты области не будут выбраны.

Я попытался использовать «z-index», но это, похоже, не имеет никакого эффекта.

DIV ОФОРМИЛ

<style> 
      .shoulder_left{ 
       left: 271px; 
       top: 130px; 
      } 
      .shoulder_right{ 
       left: 150px; 
       top: 130px; 
      } 
      .shoulder_left_back{ 
       left: 500px; 
       top: 130px; 
      } 
      .shoulder_right_back{ 
       left: 621px; 
       top: 130px; 
      } 
      .shoulder { 
       border-radius: 100%; 
       width: 18px; 
       height: 18px; 
       border: 1px solid rgba(255, 0, 12, 0.2); 
       background-color: rgba(255, 0, 12, 0.2); 
       position: absolute; 
       z-index: 1; 
      } 
     </style> 

DIVS

<div class="shoulder shoulder_left"></div> 
<div class="shoulder shoulder_right"></div> 
<div class="shoulder shoulder_left_back"></div> 
<div class="shoulder shoulder_right_back"></div> 

MAP

<area class="joint" alt="Front Right Shoulder" href="#" joint="R_Shoulder" full="Front Right Shoulder" shape="circle" coords="153,132,11" /> 
<area class="joint" alt="Front Left Shoulder" href="#" joint="L_Shoulder" full="Front Left Shoulder" shape="circle" coords="274,132,11" /> 
<area class="joint" alt="Back Right Shoulder" href="#" joint="R_Shoulder_back" full="Back Right Shoulder" shape="circle" coords="621,132,11" /> 
<area class="joint" alt="Back Left Shoulder" href="#" joint="L_Shoulder_back" full="Back Left Shoulder" shape="circle" coords="501,132,11" /> 

на скрипке вы заметите, если вы двигаете мышь медленно к краю правого плеча места, он меняется на значок руки. но в середине этого не произойдет, потому что DIV является плавающей Infront из AREA

Fiddle https://jsfiddle.net/nel_mo/q7jjemrw/

Answer 1

Просто добавьте:

pointer-events: none; 

на ваш shoulder и neck

FIDDLE