HTML 链接在 div 中无效答案

【问题标题】：HTML Link Not Active Within DivHTML 链接在 div 中无效
【发布时间】：2014-09-27 07:29:34
【问题描述】：

我无法弄清楚为什么 HTML 链接在我的代码中的两个 DIV 块中无效。如果我在主体的 DIV 之外测试它，它工作正常。 HTML如下：

<div class = "window">
    <div id = "body">
      <h3>What To Do...</h3>
      <p>
        Newport is an incredible city, with lots of things to do. For a huge list of ideas, check out <a href='http://www.discovernewport.org'>Discover Newport</a>
      </p>
      <p>We are partial to the following...</p>
    </div>
</div>

还有 CSS：

#body {
  font-size: 1.0em;
  text-align: left;
  margin-left: 1.5em;
  margin-right: 1.5em;
  color: white;
  font-family: 'Roboto', sans-serif;
  position: relative;
  overflow-y: auto;
  overflow-x: auto;
}

#body a:link,
#body a:hover,
#body a:visited {
  color: white;
  text-decoration:none;
}

.window {
  width:auto;
  height:auto;
  padding-top:0.5em;
  padding-bottom: 0.5em;
  margin:8em;
  margin-bottom: 5em;
  text-align: center;
  background-color: rgba(0, 0, 64, .9);
  color: #000040;
  border-radius:10px;
  z-index: -1;
  position: relative;
  overflow-y: auto;
  overflow-x: auto;
}

【问题讨论】：

您将所有链接设置为 text-decoration: none;你期待什么？
“活跃”是什么意思？链接不起作用吗？正如布鲁尼斯指出的那样，text-decoration:none; 删除了下划线。

标签： html css href

【解决方案1】：

#body a:visited {
  color: white;
  text-decoration:none; <!-- ??? -->
}

去掉这条线能解决你的问题吗？

【讨论】：

【解决方案2】：

z-index: -1; 是罪魁祸首；此link 的 bcz 已停用且无法正常工作。检查DEMO

【讨论】：

【解决方案3】：

“不活跃”是什么意思？

如果您希望链接的样式不同，那么您需要在 CSS 中添加一个“活动”伪类。

像这样：

#body a:active {}

【讨论】：