Почему не нажимается ссылка если внутри есть span?
На моем сайте имеется ссылка внутри которой span элемент:
На ссылке имеется display: flex.
На дочернем элементе стилей нет.
Проблема в том что при клике по тексту (желтая область), ссылка не срабатывает:
Это очень странно для меня, т.к на сайте есть более сложные конструкции внутри ссылки и у этих блоков везде срабатывает ссылка:
Дополнительно:
localhost3310 Правила 3.8.
Ответы:
Как вариант, если не поможет pointer-events: none;
на внутренний < span >, сделать у ссылки псевдоэлемент и дать ему стили
a::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; } |
a::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
и самой ссылке position: relative;
Тогда ссылка точно всегда будет поверх кнопки на всю ширину-высоту.
P.S. То, что на втором скрине, по идее не совсем корректно, в ссылку нельзя такие конструкции вкладывать.
- Спасибо, pointer-events: none; на span помог.
Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.
Пока нет других ответов. Будьте первым, кто поможет автору.
Ответить на вопрос
Проблема, когда ссылка не нажимается из-за наличия элемента внутри, может возникать из-за того, что элемент имеет стиль CSS, который перекрывает или переключает события мыши, которые должны обрабатываться ссылкой.
Для решения этой проблемы, можно попробовать несколько подходов:
1. Изменить стили элемента таким образом, чтобы они не перекрывали область ссылки. Например, можно установить свойство CSS pointer-events: none; для элемента , чтобы он не принимал события мыши и пропускал их через себя.
<span>Текст внутри span</span>
2. Изменить структуру HTML, чтобы элемент не находился непосредственно внутри ссылки. Вместо этого, можно поместить элемент внутрь другого элемента, который находится внутри ссылки.
3. Использовать JavaScript для обработки событий мыши на элементе и передачи их соответствующему обработчику ссылки. Например, можно добавить обработчик события click на элемент , который будет вызывать функцию обработки клика на ссылке.
<span>Текст внутри span</span> <a id="myLink" href="https://example.com">Ссылка</a>
Надеюсь, что один из этих подходов поможет вам решить проблему с ненажимаемой ссылкой из-за элемента . Если у вас остались вопросы или нужна дополнительная помощь, не стесняйтесь задавать.