@PhanLom

Почему не работает ссылка?

Вот так выглядит код HTML
<div class="Button">
            <div class="btn btn-one">
                    <a class="MyLink" href="https://google.com">Link</a>
                </div>
            </div>


Вот так выглядит код CSS
div[class*=Button] {
	height: 33.33%;
	width: 100%; 
    display: flex;
    justify-content: center;
    align-items: center;    
}

.MyLink {
    
    text-decoration:none;
    color: black;
}

.btn {
	line-height: 50px;
	height: 50px;
	text-align: center;
	width: 250px;
	cursor: pointer;
}

.btn-one {
	font-size: 22px;
    color: #000;
	transition: all 0.5s;
	position: relative;
}
.btn-one::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 1;
	background-color: rgba(0,0,0,0.1);
	transition: all 0.3s;
}
.btn-one:hover::before {
	opacity: 0 ;
	transform: scale(0.5,0.5);
}
.btn-one::after {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 1;
	opacity: 0;
	transition: all 0.3s;
	border: 1px solid rgba(0,0,0,0.5);
	transform: scale(1.2,1.2);
}
.btn-one:hover::after {
	opacity: 1;
	transform: scale(1,1);
}

При нажатии на ссылку я не могу перейти на сайт, в чём моя ошибка?
  • Вопрос задан
  • 54 просмотра
Решения вопроса 2
alexey-m-ukolov
@alexey-m-ukolov Куратор тега CSS
Элементы ::before и ::after располагаются поверх ссылки и перехватывают нажатия на неё.
Самое простое решение - указать для них pointer-events: none;. Если же нужна поддержка древних браузеров, нужно играть с z-index или вообще всё переделывать.
Ответ написан
@n1ksON
Интерн
В том, что у вас следующая структура: Кнопка > Ссылка
Если нажать на кнопку, то ничего не произойдёт. А если нажать на ссылку, то произойдёт переадресация.
Вы либо делаете так: Ссылка > Кнопка, либо добавьте событие клика на кнопку, после которого должна пройти переадресация.
То есть, либо:
<a href="google.com">
  <button>Button</button>
</a>

Либо:
<button>Button</button>
<script>
document.querySelector('button').addEventListener('click', () => {
  window.open('https://google.com')
})
</script>
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы