Question

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

然后我使用区域地图我可以悬停并选择点。

这里的问题是''标签似乎在''标签上方，所以如果您尝试将鼠标悬停在地图上，则无法选择区域位。

我曾试图使用'z-index'，但它似乎没有任何效果。

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>

地图

<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漂浮在AREA的前面

小提琴 https://jsfiddle.net/nel_mo/q7jjemrw/

Answer 1

只需添加：

pointer-events: none;

到您的shoulder和neck

FIDDLE

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

1 个答案: