css - 如何在非图像元素上使用图像上下文菜单？

Question

我正在处理图片库，导航控件有意与图像元素重叠。当用户右键单击其中一个导航控件对象时，我希望右键单击菜单反射(reflect)用户在右键单击图像元素时会看到的内容。我怎样才能做到这一点？我知道自定义上下文菜单对象已被弃用:https://stackoverflow.com/a/23930942/1455292

当我右键单击 .nav-left 或 .nav-right 时，我希望用户看到 .photo上下文菜单。

这是问题的一个例子:https://jsfiddle.net/9u3ghpnv/

示例标记:

<div class="gallery">
<img class="photo" src="https://mdn.mozillademos.org/files/7707/circle2.svg" />
<button class="nav-left">L</button>
<button class="nav-right">R</button>
</div>

示例 CSS:

.gallery{
position: relative;
margin: 0 auto;
width: 360px;
}

.photo{
display: block;
width: 360px;
height: 360px;
background-color: red;
}

.nav-left, .nav-right{
position: absolute;
top: 0;
width: 50%;
height: 100%;
display: flex;
align-items: center;
color: lime;
font-size: 48px;
transition: all 0.5s;
background: none;
border: none;
text-align: center;
}

.nav-left{
left: 0;
}

.nav-right{
right: 0;
}

Answer 1

如果您在 Fiddle 上上传的内容正是您所拥有的，并且您需要点击按钮，以便用户实际上可以获得底层图像的上下文菜单。

pointer-events: none;

但是这些按钮现在没有任何作用了，是吗？因为它们不可点击:/

所以现在您可能不得不混合使用这些技巧，或者只使用 popover 按钮和 JS 来完成。