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

Вы не можете нажать на anchor элемент, как это укладывается за before элемента.

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

Answer 2

Вы пропускаете кавычки "" в вашей ссылке - обратитесь к указанной ссылке для получения дополнительной информации 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

Удалить content правила из CSS для дел. Котировки не так уж импровизированы, но добавьте его тоже.

Answer 5

Вы можете нажать ее, так как div:before псевдо элемент в положении «абсолютный» покрывает вверх по ссылке, попробуйте добавить эти правила:

div:before { 
    z-index: 10; 
} 

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

со ссылкой на положение относительно вы можете установить Z-индекс больше: перед элементами, и вы должны иметь возможность щелкнуть по нему.

cheers

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> теге

Добавить 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>

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>