HTML: Div 无法点击（超链接）

Question

我目前遇到了一个问题，我无法单击为 HTML 文件提供的 link。我目前正在进行一个学校项目，该项目需要原子序数 61-90 的周期性 table。

我尝试添加简单的设计来帮助网站呈现干净的外观，然后我尝试添加一个 hyperlink 这样它可能会指向另一个网页，该网页将提供有关特定元素的详细信息。

我还没有找到任何我能理解的解决方案，我对HTML和这个网站还是很陌生（呵呵），你们能帮我解决这个问题吗？ 提前致谢！ 以下是我使用过的代码：

HTML 和 CSS:

body {
  margin: 0;
  padding: 0;
}
div {
  height: 5vw;
  width: 5vw;
  background: chocolate;
  display: inline-block;
  text-align: center;
  line-height: 5vw;
  font-size: 2vw;
  margin-right: -4px;
  position: relative;
}

div:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: inherit;
  width: inherit;
  background: rgba(200, 200, 200, 0.6);
  transition: all 0.4s;
}
div:hover:before {
  background: rgba(200, 200, 200, 0);
}

<div><a href=https://www.google.com/>Nd</a></div>
<div>Pm</div>
<div>Sm</div>
<div>Eu</div>
<div>Gd</div>
<div>Tb</div>
<div>Dy</div>
<div>Ho</div>
<div>Er</div>
<div>Tm</div>
<div>Yb</div>
<div>Lu</div>
<div>Ac</div>
<div>Th</div>

Answer 1

您的 link 中缺少引号 "" - 请参阅提到的 link 了解更多详情 W3Schools

<div><a href="https://www.google.com/">Nd</a></div>

Answer 2

只需提供双引号 ;) 并且不要那么快关闭标签 ;)

<a href="https://www.google.com">Nd</a>

想要完美，提供一个"target"属性给。

_self 对于您当前的标签， _blank 表示新标签页

所以，

<a href="https://www.google.com" target="_blank">Nd</a>

应该是完美的;)

Answer 3

为 div 从 css 中移除 content 规则。报价不是那么重要，但将其添加到。

Answer 4

可以点击，因为"absolute"位置的div:before伪元素覆盖了link，尝试添加这个规则：

div:before {
   z-index: 10;
}

div > a {
  position: relative;
  z-index: 11;
}

使用相对位置中的 link，您可以设置一个大于 :before 元素的 z-index，您应该可以点击它。

干杯

Answer 5

此代码有效！检查 a html 标签的语法。

body {
  margin: 0;
  padding: 0;
}
div {
  height: 5vw;
  width: 5vw;
  background: chocolate;
  display: inline-block;
  text-align: center;
  line-height: 5vw;
  font-size: 2vw;
  margin-right: -4px;
  position: relative;
}

div::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: inherit;
  width: inherit;
  background: rgba(200, 200, 200, 0.6);
  transition: all 0.4s;
}
div:hover:before {
  background: rgba(200, 200, 200, 0);
}

<a href="https://www.google.com"><div>Nd</div></a>
<div>Pm</div>
<div>Sm</div>
<div>Eu</div>
<div>Gd</div>
<div>Tb</div>
<div>Dy</div>
<div>Ho</div>
<div>Er</div>
<div>Tm</div>
<div>Yb</div>
<div>Lu</div>
<div>Ac</div>
<div>Th</div>

Answer 6

您无法单击 anchor 元素，因为它堆叠在 before 元素后面。

（before 元素是 absolute，因此堆叠在未指定位置的 a 元素之上，因此成为 static 位置 - 这是任何元素的默认值)

所以这里有一个修复 - 通过添加 say 使其成为定位元素：

div a {
 position: relative;
}

现在 link 可以点击了。

body {
  margin: 0;
  padding: 0;
}
div {
  height: 5vw;
  width: 5vw;
  background: chocolate;
  display: inline-block;
  text-align: center;
  line-height: 5vw;
  font-size: 2vw;
  margin-right: -4px;
  position: relative;
}

div:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: inherit;
  width: inherit;
  background: rgba(200, 200, 200, 0.6);
  transition: all 0.4s;
}
div:hover:before {
  background: rgba(200, 200, 200, 0);
}
div a {
 position: relative;
}

<div><a href=https://www.google.com/">Nd</a></div>
<div>Pm</div>
<div>Sm</div>
<div>Eu</div>
<div>Gd</div>
<div>Tb</div>
<div>Dy</div>
<div>Ho</div>
<div>Er</div>
<div>Tm</div>
<div>Yb</div>
<div>Lu</div>
<div>Ac</div>
<div>Th</div>

Answer 7

:before 与 <a> 标签重叠

将 position: relative 和 z-index: 1 添加到 a

a {
 position: relative;
  z-index: 1
}

body {
  margin: 0;
  padding: 0;
}
div {
  height: 5vw;
  width: 5vw;
  background: chocolate;
  display: inline-block;
  text-align: center;
  line-height: 5vw;
  font-size: 2vw;
  margin-right: -4px;
  position: relative;
}

div:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: inherit;
  width: inherit;
  background: rgba(200, 200, 200, 0.6);
  transition: all 0.4s;
}
div:hover:before {
  background: rgba(200, 200, 200, 0);
}
a {
 position: relative;
  z-index: 1
}

<div><a href=https://www.google.com/>Nd</a></div>
<div>Pm</div>
<div>Sm</div>
<div>Eu</div>
<div>Gd</div>
<div>Tb</div>
<div>Dy</div>
<div>Ho</div>
<div>Er</div>
<div>Tm</div>
<div>Yb</div>
<div>Lu</div>
<div>Ac</div>
<div>Th</div>

Answer 8

只需从 div::before 中删除 content: ""; 现在工作正常

body {
  margin: 0;
  padding: 0;
}
div {
  height: 5vw;
  width: 5vw;
  background: chocolate;
  display: inline-block;
  text-align: center;
  line-height: 5vw;
  font-size: 2vw;
  margin-right: -4px;
  position: relative;
}

div:before {
  position: absolute;
  top: 0;
  left: 0;
  height: inherit;
  width: inherit;
  background: rgba(200, 200, 200, 0.6);
  transition: all 0.4s;
}
div:hover:before {
  background: rgba(200, 200, 200, 0);
}

<div><a href="https://www.google.com/" style="z-index:999;">Nd</a></div>
<div>Pm</div>
<div>Sm</div>
<div>Eu</div>
<div>Gd</div>
<div>Tb</div>
<div>Dy</div>
<div>Ho</div>
<div>Er</div>
<div>Tm</div>
<div>Yb</div>
<div>Lu</div>
<div>Ac</div>
<div>Th</div>

HTML: Div 无法点击（超链接）

HTML: Div not able to be clicked (Hyperlink)

html

css

anchor

css-position

pseudo-element