【问题标题】：HTML: Div not able to be clicked (Hyperlink)HTML：无法单击 Div（超链接）
【发布时间】：2016-09-23 09:31:02
【问题描述】：
我目前遇到了一个问题，我无法单击为我的 HTML 文件提供的链接。我目前在一个需要原子序数周期表 61-90 的学校项目中。
我尝试添加简单的设计来帮助网站看起来干净，然后我尝试添加一个超链接，这样它可能会指向另一个网页，该网页将提供有关特定元素的详细信息。
我还没有找到任何我能理解的解决方案，我对 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>
【问题讨论】：
标签：
html
css
css-position
anchor
pseudo-element
【解决方案1】：
您的链接中缺少引号“” - 有关详细信息，请参阅提到的链接
W3Schools
<div><a href="https://www.google.com/">Nd</a></div>
【解决方案2】：
您无法单击 anchor 元素，因为它堆叠在 before 元素后面。
（before 元素是absolute，因此堆叠在未指定位置的a 元素之上，因此变为static 位置- 这是任何元素的默认值）
所以这里有一个修复方法——通过添加 say 使其成为定位元素：
div a {
position: relative;
}
现在链接可以点击了。
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>
【解决方案3】：
只需提供双引号 ;) 并且不要这么快关闭您的标签 ;)
<a href="https://www.google.com">Nd</a>
如果你想完美，提供一个“目标”属性。
_self 用于您当前的标签，
_blank 为新标签页
所以，
<a href="https://www.google.com" target="_blank">Nd</a>
应该是完美的;)
【解决方案4】：
从 div 的 CSS 中删除 content 规则。引号不是那么重要，但也添加它。
【解决方案5】：
您可以点击它，因为“绝对”位置的div:before伪元素覆盖了链接，请尝试添加此规则：
div:before {
z-index: 10;
}
div > a {
position: relative;
z-index: 11;
}
使用相对位置的链接，您可以设置一个大于 :before 元素的 z-index，并且您应该能够点击它。
干杯
【解决方案6】：
此代码有效！检查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>
【解决方案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>
【解决方案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>