Как при наведении на текст и пустоту между текстом сделать так что — бы срабатывала ссылка?
Проблема в том что я не знаю как навести допустим на 1 пункт и чтобы неважно куда тыкнуть мышку хоть в пустоту между нумерацией и текстом всё равно ссылка срабатывала - что бы было как на фото
целую ночь думал - даже не знаю что делать
div { display: flex; gap: 10px; /* Отступ между "lol1" и "lol2" */ } a { text-decoration: none; position: relative; cursor: pointer; } a::after { content: ''; display: block; height: 1px; background-color: black; position: absolute; bottom: -1px; transition: width 0.3s ease; } div:hover a::after { width: 100%; /* } |
div { display: flex; gap: 10px; /* Отступ между "lol1" и "lol2" */ } a { text-decoration: none; position: relative; cursor: pointer; } a::after { content: ''; display: block; height: 1px; background-color: black; position: absolute; bottom: -1px; transition: width 0.3s ease; } div:hover a::after { width: 100%; /* }
Дополнительно:
сложность вопроса "средний" xDDDDDDDDDDDDDDDDDDDDDDDDDDDDD
Что именно вы с ней делали, что не получилось?
Ответы:
https://tproger.ru/articles/clickable-area
Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.
Пока нет других ответов. Будьте первым, кто поможет автору.
Ответить на вопрос
Для того чтобы сделать так, чтобы при наведении на текст и пустоту между текстом срабатывала ссылка, можно использовать следующий подход:
1. Создать обертку для текста, например
2. Применить стили к этой обертке, чтобы текст и пустота вокруг текста стали ссылкой.
3. Добавить JavaScript событие для обработки наведения на текст и пустоту между текстом.
Пример реализации на языке программирования PHP:
<div class="link-wrapper"> <a href="https://example.com">Наведите курсор на этот текст</a> </div> .link-wrapper { display: inline-block; padding: 10px; border: 1px solid #ccc; } .link-wrapper:hover { background-color: #f0f0f0; cursor: pointer; } .link-wrapper a { text-decoration: none; color: #333; } document.querySelector('.link-wrapper').addEventListener('click', function() { window.location.href = this.querySelector('a').href; });
В данном примере мы создаем обертку для текста, добавляем стили для обертки и ссылки, а затем добавляем JavaScript событие, которое при наведении на текст и пустоту между текстом перенаправляет пользователя по указанной ссылке. Таким образом, при наведении на текст и пустоту вокруг него будет срабатывать ссылка.