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

Question

我目前遇到的问题是我无法点击我为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>

Answer 1

您的链接中缺少引号“ - 请参阅上述链接以获取更多详细信息 W3Schools

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

Answer 2

只提供双引号;）并且不要这么快关闭你的标签;）

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

如果您想要完美，请提供“目标”属性。

_self为您当前的标签， _blank用于新标签

所以，

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

应该是完美的;）

Answer 3

从您的css中移除content规则以获取div。行情不是那么重要，但也加上它。

Answer 4

您可以点击它，因为“绝对”位置的div:before伪元素掩盖了链接，尝试添加此规则：

div:before {
   z-index: 10;
}

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

如果链接处于相对位置，您可以将z-index设置为大于：before元素，并且您应该能够单击它。

欢呼声

Answer 5

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

＆＃13;

＆＃13;

@Model(adaptables = Resource.class)
public class ModelA { 
   @ValueMapValue(name = "jcr:title", injectionStrategy = InjectionStrategy.OPTIONAL)
   private String title;

   @Inject // This should works
   @Self
   private ModelB modelB;
}

＆＃13;

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);
}

＆＃13;

＆＃13;

＆＃13;

Answer 6

您无法点击anchor元素，因为它位于before元素后面。

（before元素为absolute，因此位于未指定位置的a元素上方，因此成为static位置 - 这是默认值任何元素）

所以这是一个修复 - 通过添加say：

使其成为定位元素

div a {
 position: relative;
}

现在该链接可以点击。

＆＃13;

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

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

从content: "";移除div::before 现在它工作正常

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>