Div opacity=0，但仍与鼠标交互

Question

这就是我的问题:我有两个div，我用javascript做了一个简单的标签菜单，里面有两个标签。当我的鼠标在tab1上时，div1的不透明度为1，div2的不透明度为0，而当鼠标在tab2上时，情况正好相反。

现在，即使div的不透明度为0，更改光标的链接或其他元素仍与鼠标交互。我要他们完全停用，就像不存在一样。我使用了disables="disabled“，但仍然不起作用。

我能做些什么来完全禁用div？(仅在javascript中，不在jquery中)。我应该使用z-index吗？

我已经阅读了其他主题，但仍然没有找到解决方案。

提前谢谢你。

Answer 1

使用elem.style.visibility = "hidden"而不是opacity。

您可以改用elem.style.display = "none"，但这会影响页面流，这可能不是您想要的。

Answer 2

你会发现很多内联标签的例子，标准的方法是使用display none或position absolute：

{display:"none";}

或者：

{position:absolute;top:-9999px;}

要恢复原始状态，请执行以下操作：

{display:"";}

正如@user1689607所说，这将影响布局，但在实践中，这通常是您想要的选项卡(您不希望在页面上留下空白区域)。