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

Area map hover hidden behind DIV elements

我有一个人体图像。 在图像上,我浮动了显示可以 selected

区域的关键点

然后我使用可以悬停的区域地图和 select 点。

这里的问题是 '' 标签似乎在 '' 标签上方,因此如果您尝试将鼠标悬停在地图上,则无法 select 编辑区域位。

我试过用'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>

地图

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

在fiddle你会注意到,如果你将鼠标慢慢移向右肩点的边缘,它会变成手形图标。但在中间它没有,因为 DIV 漂浮在 AREA

的前面

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

只需添加:

pointer-events: none;

你的 shoulderneck

FIDDLE