CSS 使 在移动设备上不可点击

Question

我在 <div> 中有 2 个按钮它们仅在悬停时可见，这在笔记本电脑/台式电脑上运行良好。 <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

使用不透明度而不是可见性(或两者)。可见性只会使元素透明。不透明度消除了与元素交互的能力。