CSS使<div>无法在移动设备上点击

Question

我在<div>内有两个按钮，它们仅在悬停时可见，在笔记本电脑/台式电脑上可以正常工作。 <div>位于网站上的图片上方，当您将鼠标悬停在图片上方时，会显示包含内部按钮的<div>，您可以点击其中任何一个来转到某个位置。

问题是当我在移动设备上查看此内容时，如果我单击任何按钮所在的区域，即使它们不可见，按钮也会显示，但是您点击的按钮的链接已激活 - 我不想要的。我想点击该区域，然后显示按钮，然后单击要继续链接的按钮。

我尝试了以下但是无法弄明白：

1）隐藏<div>，将.my-div {z-index:-1;}设置为标准，将.my-div:hover {z-index:1;}设置为悬停 - 这有效，但我仍然遇到同样的问题

2）将<div>设置为.my-div {visibility:hidden;}作为标准，将.my-div:hover {visibility:visible;}设置为悬停 - 这又有效但我遇到了同样的问题

我可以使用其他任何CSS方法吗？

干杯 克里斯

Answer 1

使用不透明度而不是可见性（或两者兼而有之）。可见性仅使元素透明。不透明度消除了与元素交互的能力。