HTML：Divをクリックできません（ハイパーリンク）

Question

私は現在、自分のHTMLファイルで提供しているリンクをクリックできないという問題に遭遇しました。私は現在、原子番号61〜90の周期表が必要な学校プロジェクトに参加しています。

ウェブサイトがきれいに見えるようにするためのシンプルなデザインを追加しようとしましたが、ハイパーリンクを追加しようとしたため、特定の要素に関する詳細を示す別のWebページが表示される可能性があります。

私はまだ私が理解することができます任意のソリューション、 は私が（笑）、まだ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); 
 
}

<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

それはbefore要素の後ろに積層されているとしてあなたはanchor要素をクリックすることはできません。

FIX-はそれを作るされているので、ここで

（before要素はそう任意の要素のデフォルトであるstatic位置 - なって、位置が特定されていないa素子上に積層され、従ってabsoluteであり）配置された要素は、次のように追加して配置します。

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>

Answer 2

：

HTMLとCSS：ここ は、私が使用したコードですさらなる詳細については、 W3Schools

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

Answer 3

ちょうど二重引用符を提供;）ので、すぐにあなたのタグを閉じないでください、あなたは完璧なものにしたい場合は

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

）、「ターゲット」属性にしています。

あなたの現在のタブのため_self、新しいタブの _blank

ので、

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

は完璧である必要があります。）

Answer 4

のdivのためにあなたのCSSからcontentルールを削除します。引用はあまり意味がありませんが、それも追加してください。

Answer 5

「絶対」リンクを隠蔽された位置にあるdiv:before擬似要素は、このルールを追加しようとするので、あなたはそれをクリックすることができます：あなたはZインデックスを設定することができた位置にリンクして

div:before { 
    z-index: 10; 
} 

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

を：before要素よりも大きく、その要素をクリックできる必要があります。

歓声

Answer 6

このコードは機能します。 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 7

:before<a>タグに

を重ねている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>

に position: relativeと z-index: 1を追加します。

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>