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

我目前遇到了一个问题，我无法点击我为HTML文件提供的链接。我目前正在参加一个需要61-90原子序数周期表的学校项目。HTML：div无法点击（超链接）

我尝试添加简单的设计，可以帮助网站提供一个干净的外观，然后我试图添加一个超链接，因此它可能导致另一个网页，这将给有关特定元素的细节。

我还没有找到任何解决方案，我可以理解，我还是很新的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>

来源

2016-09-23 Joaquin Luis B. Basbacio

，因为它是层叠before元素后面不能在anchor元素上点击。

（该before元件是absolute，因此层叠未指定位置的量，a元件上方，所以成为static位置 - 这对于任何元素的默认）

所以这里是一个FIX-使它定位元素加入说：

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>

来源

2016-09-23 09:40:37 kukkuz

它实际上，谢谢！ :) –

你缺少引号 “” 在你的链接 - 是指所提到的链接了解更多详情 W3Schools

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

来源

2016-09-23 09:36:31

没有什么似乎已经发生了，感谢你回答，但！ –

只需提供双引号）和不那么快闭上你的标签;）

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

如果你想是完美的，提供了一个“目标”属性。

_self为当前标签页中， _blank新标签

所以，

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

应该是完美;）

来源

2016-09-23 09:36:50

从你的CSS的DIV删除content规则。行情并不那么重要，但也加入。

来源

2016-09-23 09:37:54

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

div:before { 
    z-index: 10; 
} 

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

在相对位置的链接，您可以设置的z-index大于：元素之前，你应该能够点击它。

欢呼声

来源

2016-09-23 09:38:47

此代码有效！检查您的语法为 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>

来源

2016-09-23 09:39:43 MuhammadJ

:before被重叠上<a>标签

添加position: relativez-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>

来源

2016-09-23 09:41:05 Tushar

我终于能够点击超链接。谢谢！ :) –

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

来源

2016-09-23 09:45:59

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

回答

相关问题