href 在 Firefox 和 Opera 中不起作用

Question

我正在使用 Css3 效果来使我的菜单看起来更漂亮，但这没有问题，但是我不知道由于一些奇怪的原因，当我单击菜单项时，它们不会重定向到所需的页面，即我的 href="abc. aspx" 在 Firefox 、 Opera 中不起作用，但在 Chrome 中运行良好。这是我使用的 Css3 代码

#Menu a:active,
#Menu a.active:before,#Menu a:hover:before
{
    Content: ' ';
    position:absolute;
    z-index:-1;
    width:0px;
    height:0px;
    left:50%;
    top:50%;
    border-radius:50%;
    box-shadow:0 0 35px 30px #ADD7E7;

}

我的菜单看起来像

但是，当我删除 Css3 样式时，href 有效。任何人都可以帮助我解决为什么会发生这种情况。 欢迎提出任何建议。

谢谢

Answer 1

问题可能源于样式 #Menu a:active 以及伪元素。尝试将它们分开，甚至干脆从定义中删除 #Menu a:active。然后您可以将您的 z-index 设置回 -1，因为它只会应用于伪元素。

我已经设置了jsfiddle here。

Answer 2

这很可能是因为您的 css 中的这一行：

z-index:-1;

默认图层是文档的0，但由于悬停时您将其设置为-1，因此您将无法点击它。

Answer 3

z-index:-1 将元素放在主体后面。因此，它不能被点击，因为身体正在遮挡它。

但是，如果您还没有为正文定义背景颜色，这会有点模棱两可，因为透明背景颜色可能无法捕捉到点击。

避免负 z 索引。它们可以在正数中随心所欲地升高，比负数更可靠。