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

Question

我有一个人体图像。在图像上，我浮动了显示可以 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/

Answer 1

只需添加：

pointer-events: none;

你的 shoulder 和 neck

FIDDLE

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

Area map hover hidden behind DIV elements

html

css

area