Как раскрыть меню которое скрытый под текстом когда сближать курсор к тексту?

Ссылка скопирована
CSS HTML PHP
13 февраля 2026 1 ответ

До пустим есть слово под которым есть скрытый ul list и надо сделать так чтобы показать именно скрытый ul list когда сближать курсор к верхнему слову

Как раскрыть меню которое скрытый под текстом когда сближать курсор к тексту?

Дополнительно:

что значит "приближать"? hover?

  • IvanU7n, да, hover. Я пробовал с этим тегом, но у меня не получилось. Еще использовал visibilty, opacity. Может у вас есть вариант?
  • Turqut Məcidli, классика
    li:hover + ul { /* свойства для появления */ }
    сработает, если скрытое меню в документе следует за элементом, ответственным за его показ
    а вообще материалов навалом, первое что нашлось: https://html5book.ru/mnogourovnevoe-vypadayushee-menu/
  • IvanU7n, только без плюса.
    Селектор li+ul в принципе невозможен, потому что они не могут быть соседями.

    И ещё какой-нибудь :focus-within приделать.

    • Ответы:

    и в чем проблема? вешаете на главный пункт меню отдельный класс и на него ховер с показом дочернего меню

    Нужно решить такую задачу?

    Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.

    Заказать помощь
    Лучший ответ
    1
    Игорь Волков Ответ

    Для того чтобы раскрыть меню, которое скрыто под текстом при приближении курсора к тексту, можно использовать различные методы CSS и JavaScript. Один из способов - использовать псевдоэлемент :hover.

    Пример кода на JavaScript:

    document.addEventListener('DOMContentLoaded', function() {
  const text = document.querySelector('.text');
  const menu = document.querySelector('.menu');
 
  text.addEventListener('mousemove', function(e) {
    const rect = text.getBoundingClientRect();
    const x = e.clientX - rect.left;
    const y = e.clientY - rect.top;
 
    if (x < 50 && y < 50) {
      menu.style.display = 'block';
    } else {
      menu.style.display = 'none';
    }
  });
});

    document.addEventListener('DOMContentLoaded', function() { const text = document.querySelector('.text'); const menu = document.querySelector('.menu'); text.addEventListener('mousemove', function(e) { const rect = text.getBoundingClientRect(); const x = e.clientX - rect.left; const y = e.clientY - rect.top; if (x < 50 && y < 50) { menu.style.display = 'block'; } else { menu.style.display = 'none'; } }); });

    Пример кода на CSS:

    .menu {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  background-color: #fff;
  border: 1px solid #000;
  padding: 10px;
}
 
.text {
  position: relative;
}

    .menu { display: none; position: absolute; top: 0; left: 0; background-color: #fff; border: 1px solid #000; padding: 10px; } .text { position: relative; }

    В этом примере, когда пользователь приближает курсор к тексту, проверяется его координаты относительно текста. Если курсор находится в определенной области (например, в левом верхнем углу текста), то меню отображается, в противном случае - скрывается.

    Это лишь один из способов решения данной проблемы, можно также использовать другие методы CSS и JavaScript для достижения желаемого эффекта.

    Другие ответы (0)

    Пока нет других ответов. Будьте первым, кто поможет автору.

    Ответить на вопрос

    комментарий

    Ваш адрес email не будет опубликован. Обязательные поля помечены *

    Вам также может быть интересно

    Веб-разработка Какие особенности разработки сайтов под тор/даркнет? 1 ответ Веб-разработка Как поправить этот код чтобы можно было обновить данные в бд( при взаимодействии с методом класса в Node.js)? 2 ответов Android Как заменить класс AuthorizationCodeInstalledApp на Android (Google API)? 1 ответ Google Как подтвердить аккаунт Google? 1 ответ