CSS帮助请! CSS嵌套元素停用链接

Question

我的链接在某些嵌套元素中变得无效时遇到了问题。我遵循了一些关于通过 Andy Budd 的教程创建圆 Angular 框的说明。无论如何，这一切都很好，除非我将链接标签包裹在几份副本周围。我还是个新手，所以也许这是一个简单的修复，但我现在已经花了一天多的时间试图自己解决这个问题，但似乎无法解决。

只是为了澄清这一点，链接在我将在下面列出的“box”元素之外的页面上的任何地方都有效，我已经双重和三次检查“box”元素中的链接是否正确写入并且它是。 CSS 甚至可以找到链接并正确设置样式，但是，鼠标功能似乎被禁用了。这一切有意义吗？下面是 CSS，任何帮助将不胜感激......

这是创建盒子的代码，它可以正常工作......

.box {
    width:831px;
    background:url(../imgs/box-spacer.gif) repeat-y;
}

.box h1 {
    background:url(../imgs/box-top.gif) no-repeat left top;
    padding-top:40px;
    font-weight: normal;

}

.box .last {
    background:url(../imgs/box-bottom.gif) no-repeat left bottom;
    padding-bottom:60px;

}
.box h1, .box p {
    padding-left:60px;
    padding-right:60px;
}

这是我用来测试页面是否将其视为链接的代码......

.box h1 a:link {
    color:#00CCFF;
}

.box h1 a:hover {
    color: #FF0066;
}

它正确地改变了颜色，但悬停不起作用，如果你点击，它不会链接你到任何地方。同样，链接正确地写在了页面上。有人可以帮忙吗？我很感激。此外，该网站位于 http://www.fiddlergroup.com/zygote。如果有帮助。我用于测试的特定页面是“名称中包含什么”页面。正如您将看到的，所有的代码和页面以及其他的都非常简单，只是似乎无法弄清楚如何解决这个奇怪的问题。

Answer 1

问题出在 #holder 元素上的 z-index: -100。点击事件在 body 元素上结束，而不是向下到达链接。删除负 z-index，它应该可以工作。