Area map hover hidden behind DIV elements

Question

I have a image of a human body. On the image I float key points that show the areas that can be selected

and then I use Area map where I can hover and select the the points.

The problem here is that the '' tags seem to be above the '' tags, so if you try and hover over the map, the area bits cant be selected.

I have tried to use 'z-index', but it does not seem to have any effect.

DIV STYLES

   <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" />

on the fiddle you will notice, if you move the mouse slowly towards the edge of the right shoulder spot, it changes to the hand icon. but in the middle it does not, because the DIV is floating infront of the AREA

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

Answer 1

Just add:

pointer-events: none;

to your shoulder and neck

FIDDLE