Как я могу открыть небольшое окно, когда пользователь наводит курсор на текст?

StackOverflow https://stackoverflow.com/questions/1042662

  •  22-07-2019
  •  | 
  •  

Вопрос

Я готовлю веб-страницу с большим количеством данных, которые можно будет отобразить, не делая страницу слишком громоздкой.Я рассматриваю другой способ сделать это.Одним из способов было бы волшебное появление дополнительных данных в небольшом окне, когда пользователь наводит курсор на определенную часть текста. Yahoo!Ответы делают что-то подобное, когда вы наводите курсор на пользователя.Но я полагаю, что это должно быть слишком сложно для кодирования (для моего уровня).

Итак, я ищу простой способ заставить небольшое всплывающее окно появляться рядом с указателем мыши, когда пользователь наводит курсор на особенно интересный текст.Окно должно исчезнуть автоматически, как только пользователь покинет текст.По этой теме у меня есть несколько вопросов:

  • Как это может быть сделано?
  • Можно ли это сделать без использования JavaScript?
  • Какие еще решения мне следует рассмотреть?(Например, я видел, как на некоторых веб-страницах некоторые разделы расширяются, когда пользователь наводит на них курсор мыши)
Это было полезно?

Решение

Просто используйте DIV, чтобы показать свой текст, открывать совершенно новое окно - это излишне, и, поскольку у большинства людей в браузерах есть блокировщики всплывающих окон, окно даже не будет отображаться.Я предлагаю использовать JQuery (хорошо начать с него, если вы новичок, поскольку это значительно упростит вашу разработку Javascript) и найденный плагин JQuery Tooltip. здесь

Другие советы

Самым красивым решением, вероятно, было бы использование jQuery и плагина всплывающей подсказки jQuery, как упоминалось выше.Если вы действительно хотите избежать использования JavaScript, вы можете достичь этой цели, просто используя CSS:

<div id="bigdiv">
bla
<div id="tooltip">this is a bla</div>
</div>

#tooltip{
  display:none;
}
#bigdiv:hover #tooltip{
  display:block;
}

Да, это можно сделать с помощью JavaScript.

Вам нужно написать события для наведения и наведения курсора мыши на текстовый элемент.Создайте элемент div с некоторым стилем и отобразите текст внутри элемента как внутренний текст элемента div.Установите положение div в соответствии с текстовым элементом.

Вы также можете использовать Yahoo!Библиотека пользовательского интерфейса (YUI), похожая на jQuery.На самом деле, скорее всего, это будет то же самое, что они использовали на Yahoo!Сайт ответов.

Взгляните на их очень полезный сайт. http://developer.yahoo.com/yui/container/overlay/

Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top