区域地图悬停隐藏在 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
的前面
只需添加:
pointer-events: none;
你的 shoulder
和 neck
我有一个人体图像。 在图像上,我浮动了显示可以 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
的前面只需添加:
pointer-events: none;
你的 shoulder
和 neck