Html 区域地图悬停隐藏在DIV元素后面

我有一个人体的图像。 在图像上，我浮动显示可选择区域的关键点

然后我使用区域地图，在那里我可以悬停并选择点

这里的问题是“”标记似乎位于“”标记之上，因此如果尝试将鼠标悬停在地图上，则无法选择区域位

我曾尝试使用“z索引”，但似乎没有任何效果

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>

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

.左肩{
左：271px；
顶部：130像素；
}
1.肩膀向右{
左：150px；
顶部：130像素；
}
.肩左后{
左：500px；
顶部：130像素；
}
.肩(右)背(右){
左：621px；
顶部：130像素；
}
.肩膀{
边界半径：100%；
宽度：18px；
高度：18px；
边框：1px实心rgba（255,0,12,0.2）；
背景色：rgba（255,0,12,0.2）；
位置：绝对位置；
z指数：1；
}

DIVS

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

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

地图

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

只需添加：

pointer-events: none;

到你的
肩膀
和
脖子

你是添加演示还是摆弄图像？太棒了，太简单了。谢谢你。很高兴我能帮忙