Как сделать выпадающий список при наведении курсора html

Как при наведении курсора на текст сделать выпадающий список с номерами телефонов , заключенных в div?

Есть сайт, пытаюсь добавить такое вот всплывающее окно(см. ниже пример) по наведению курсора на определенный текст

Просто текст
 

текст показывает при наведении курсором, а как туда «засунуть» следующий div ?

просто в title никак не получается вписать этот участок кода

Отслеживать

Никита Лосев

задан 17 июн 2021 в 6:12

Никита Лосев Никита Лосев

43 5 5 бронзовых знаков

1 ответ 1

Сортировка: Сброс на вариант по умолчанию

Если вы делаете эффект наведения мыши, то это делается не через параграфы и блоки, а через выпадающие списки. Вот пример такой реализации. Там несколько кривой HTML и CSS, за что я извиняюсь, так как я делал это только в начале изучения верстки, однако саму концепцию, я уверен, вы поймете:

.main < margin: 0; padding: 0; list-style-type: none; >.main > li < display: inline-block; position: relative; >.main > li:hover > ul < visibility: visible; opacity: 0.9; transition: all 0.2s ease-in-out; >.main > li > ul < margin: 0; padding: 0; list-style-type: none; opacity: 0.1; visibility: hidden; background: #FFFFFF; position: absolute; top: 50px; left: 0; >li.content < margin-right: -13px; >li.content::after < content: " / "; color: white; font-size: 20px; padding-top: 10px; margin-left: 13px; >li.content:last-child::after < content: none; >div < background: #d6161d; height: 50px; color: white; font-family: Trebuchet MS; >ul.main < margin-left: 100px; >div > ul > li < margin-left: 30px; padding-top: 10px; >a < color: #FFFFFF; >#shadow < box-shadow: 0 0 10px #aeaeae; height: 184px; >li > ul > li < width: 250px; height: 30px; padding-top: 10px; >div.pouring < background: #FFFFFF; width: 225px; height: 36px; color: #e5e5e5; border-bottom: 0.5px solid #e5e5e5; >#first-div < height: 39px; >a.pass < color: #a7a7a7; justify-content: center; position: relative; top: 7px; display: block; width: 200px; height: 27px; font-size: 14px; text-decoration: none; >div#first-div a.pass < top: 11px; >a.pass:hover < text-decoration: underline; >.mark div a < margin-left: 15px; >.mark div:hover, .mark div:hover a, .mark a:hover < display: block; background-color: #e5e5e5; color: #d73135; align-items: center; >ul < height: 100%; margin: 0; >li

Если же вам надо не наведение мышью, а появление модалки при нажатии, то тут придется писать отдельную верстку и менять ее стили через обработчики на JS

Как показать и скрыть раскрывающееся меню при наведении курсора мыши с помощью CSS

Если вы просто хотите отображать и скрывать раскрывающееся меню при наведении курсора мыши, вам не нужен JavaScript. Вы можете сделать это, просто используя CSS-свойство display и псевдокласс :hover .

В следующем примере показано, как реализовать простое раскрывающееся меню с помощью CSS.

И с семантической и практической точки зрения это не самое удачное решение.

Во-первых, пользователь захочет кликнуть по ссылке Каталог и вам нужно запретить переход по ней используя event.preventDefault(); . А во вторых пользователи, зашедшие с мобильного устройства не смогут воспользоваться функцией наведения и, как следствие, у них не откроется дополнительное меню.

Читайте также

Похожие примеры:

• Как анимировать цвет текста при наведении курсора мыши с помощью CSS
• Как анимировать фоновый цвет элемента при наведении курсора мыши с помощью CSS
• Как создать эффект трехмерного переворачивания при наведении курсора мыши с помощью CSS

Выпадающее меню на Bootstrap 4 при наведении (событие hover)

Как известно, стандартный dropdown список раскрывается только при нажатии на главный пункт меню. По умолчанию выпадающий список имеет свойство « display: none; », и переходит в « display: block; », когда срабатывает событие click и на оборот — чтобы скрыть, нужно опять нажать на меню.

На примере меню из документации Bootstrap 4:

В данном варианте, если вы просто поместите это меню на сайте, подключите все необходимые библиотеки, меню будет работать по клику.

Чтобы меню раскрывалось и скрывалось при наведении (событие hover), достаточно чуть подправить css файл bootstrap 4 или прописать это в своем файле стилей:

nav.navbar .dropdown:hover > .dropdown-menu display: block; 
>
  

Теперь при наведении, нашему списку будет присваиваться свойство « block » и он раскроется. Вот так легко это делается, не правда ли?

Чтобы это работало только на ПК версиях экранов, и не работало на мобильных устройствах, так как там просто отсутствует нормальная работа события hover . Я рекомендую прописать ниже еще вот такой код:

@media only screen and (max-device-width: 992px) nav.navbar .dropdown:hover .dropdown-menu display: none; 
> 
> 

Учтите, что этим вы не отменяете событие click – раскрытие меню по клику. Оно будет так же работать наравне и с наведением.

Как отключить событие click и оставить только событие hover , вы можете прочитать в этой статье:

Всем удачи!

Возможно вам так же будет интересно:

• Осень – время подвести итоги и планы на будущее. Часть 2
• Постоянный онлайн в ICQ (аське)
• Конференция по информационной безопасности. Аналитик по информационной безопасности
• Профессиональное создание сайтов
• Убираем копирайт в SimpleForm2

Если я Вам помог — оставьте свой отзыв или поделитесь сайтом с друзьями в социальных сетях!

Создаем выпадающее меню на чистом CSS

В данном уроке мы разберем, как создать выпадающее меню совсем без использования JavaScript. Простое, но функциональное решение на основе общедоступных свойств CSS можно использовать где угодно.

Концепция

Выпадающее меню служит в качестве обзора иерархии разделов, которые содержатся в пункте меню, объединяющем их. Обычно в меню перечисляются все подразделы определенной секции, если навести указатель мыши на нее.

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

Разметка

Большинство выпадающих меню основано на использовании громоздкой разметки и Javascript. Наш вариант будет использовать простую структуру HTML кода и 19 строк CSS, с небольшим вкраплением CSS3 для придания внешнего лоска.

. Нет никаких ID, классов и элементов. Простой ясный код.

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

CSS

в отличное, простое в использовании и самодостаточное выпадающее меню.

/*------------------------------------*\ НАВИГАЦИЯ \*------------------------------------*/ #nav < float:left; width:100%; list-style:none; font-weight:bold; margin-bottom:10px; >#nav li < float:left; margin-right:10px; position:relative; display:block; >#nav li a < display:block; padding:5px; color:#fff; background:#333; text-decoration:none; text-shadow:1px 1px 1px rgba(0,0,0,0.75); /* Тень текста, чтобы приподнять его на немного */ -moz-border-radius:2px; -webkit-border-radius:2px; border-radius:2px; >#nav li a:hover < color:#fff; background:#6b0c36; background:rgba(107,12,54,0.75); /* Выглядит полупрозрачным */ text-decoration:underline; >/*--- ВЫПАДАЮЩИЕ ПУНКТЫ ---*/ #nav ul < list-style:none; position:absolute; left:-9999px; /* Скрываем за экраном, когда не нужно (данный метод лучше, чем display:none;) */ opacity:0; /* Устанавливаем начальное состояние прозрачности */ -webkit-transition:0.25s linear opacity; /* В Webkit выпадающие пункты будут проявляться */ >#nav ul li < padding-top:1px; /* Вводим отступ между li чтобы создать иллюзию разделенных пунктов меню */ float:none; background:url(dot.gif); >#nav ul a < white-space:nowrap; /* Останавливаем перенос текста и создаем многострочный выпадающий пункт */ display:block; >#nav li:hover ul < /* Выводим выпадающий пункт при наведении курсора */ left:0; /* Приносим его обратно на экран, когда нужно */ opacity:1; /* Делаем непрозрачным */ >#nav li:hover a < /* Устанавливаем стили для верхнего уровня, когда выводится выпадающий список */ background:#6b0c36; background:rgba(107,12,54,0.75); /* Выглядит полупрозрачным */ text-decoration:underline; >#nav li:hover ul a < /* Изменяем некоторые стили верхнего уровня при выводе выпадающего пункта */ text-decoration:none; -webkit-transition:-webkit-transform 0.075s linear; >#nav li:hover ul li a:hover < /* Устанавливаем стили для выпадающих пунктов, когда курсор наводится на конкретный пункт */ background:#333; background:rgba(51,51,51,0.75); /* Будет полупрозрачным */ text-decoration:underline; -moz-transform:scale(1.05); -webkit-transform:scale(1.05); >

Первый раздел кода весьма простой — мы устанавливаем обычное горизонтальное меню. Но, обратите внимание, что селекторы #nav li и #nav li a выделяют все элементы списка и ссылки в выпадающих пунктах тоже. Использование каскадов.

Вложенные списки

#nav ul < list-style:none; position:absolute; left:-9999px; /* Скрываем за экраном, когда не нужно (данный метод, лучше чем display:none;) */ opacity:0; /* Устанавливаем начальное состояние прозрачности */ -webkit-transition:0.25s linear opacity; /* В Webkit выпадающие пункты будут проявляться */ >

в пункт верхнего уровня. Очевидно, что нужно удалить метки пунктов списка с помощью list-style:none; , и установить position:absolute; для позиционирования выпадающих подпунктов под пунктом списка, который их содержит.

для помещения его в позицию -9999px за пределами экрана, когда он не используется.

, и декларация для браузеров Webkit, для плавного вывода элемента
при наведении курсора мыши.

#nav ul li < padding-top:1px; /* Вводим отступ между li чтобы создать иллюзию разделенных пунктов меню */ float:none; background:url(dot.gif); >#nav ul a < white-space:nowrap; /* Останавливаем перенос текста и создаем многострочный выпадающий пункт */ display:block; >#nav li:hover ul < /* Выводим выпадающий пункт при наведении курсора */ left:0; /* Приносим его обратно на экран, когда нужно */ opacity:1; /* Делаем непрозрачным */ >

Для элемента #nav ul a мы устанавливаем свойство white-space:nowrap; для предотвращения переноса строк на другую строку.

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

#nav li:hover a < /* Устанавливаем стили для верхнего уровня, когда выводится выпадающий список */ background:#6b0c36; background:rgba(107,12,54,0.75); /* Выглядит полупрозрачным */ text-decoration:underline; >

#nav li:hover a определяет, что произойдет со ссылкой верхнего уровня, когда наследник будет иметь состояние hover:

• Выпадающий список
  расположен внутри элемента
  • .
  • Если навести курсор мыши на ссылку ( ) в выпадающем списке (
    ), то одновременно пункт списка верхнего уровня (
    • ) тоже будет иметь состояние hover, так как выделен контент внутри него.
    • Так как технически используется состояние hover для элемента списка верхнего уровня, то #nav li:hover a действует, задавая стиля для ссылки.

    #nav li:hover ul a < /* Изменяем некоторые стили верхнего уровня при выводе выпадающего пункта */ text-decoration:none; -webkit-transition:-webkit-transform 0.075s linear; >

    Здесь мы изменяем некоторые аспекты для состояния hover, чтобы выпадающие элементы отличались от ссылок верхнего уровня. В данном уровне мы просто отключаем подчеркивание текста.

    Также добавляется правило для браузеров Webkit -webkit-transition:-webkit-transform 0.075s linear; , которое анимирует -webkit-transform с помощью затухания/появления в течение 0.075 секунды.

    #nav li:hover ul li a:hover < /* Устанавливаем стили для выпадающих пунктов, когда курсор наводится на конкретный пункт */ background:#333; background:rgba(51,51,51,0.75); /* Будет полупрозрачным */ text-decoration:underline; -moz-transform:scale(1.05); -webkit-transform:scale(1.05); >

    В последней части определяются стили для выделения определенного пункта в выпадающем списке при наведении курсора мыши.

    Вначале мы определяем два свойства background:; . Определение background:rgba(51,51,51,0.75); устанавливает умеренно серый фон для пункта с прозрачностью 0.75. Те браузеры, которые не распознают такое определение цвета (например, IE) будут использовать определение цвета в старом стиле в предыдущей строке.

    Готово!

    Простая структура HTML разметки и несколько строк CSS создают замечательное выпадающее меню без использования всемогущего JavaScript. Наверняка найдется немало проектов, в которых такое решение найдет свое место.

    Данный урок подготовлен для вас командой сайта ruseller.com
    Источник урока: csswizardry.com/2011/02/creating-a-pure-css-dropdown-menu/
    Перевел: Сергей Фастунов
    Урок создан: 23 Февраля 2011
    Просмотров: 476995
    Правила перепечатки

    5 последних уроков рубрики «CSS»

    • 

    Забавные эффекты для букв

    Небольшой эффект с интерактивной анимацией букв.

    

    Реализация забавных подсказок

    Небольшой концепт забавных подсказок, которые реализованы на SVG и anime.js. Помимо особого стиля в примере реализована анимация и трансформация графических объектов.

    

    Анимированные буквы

    Эксперимент: анимированные SVG буквы на базе библиотеки anime.js.

    

    Солнцезащитные очки от первого лица

    Прикольный эксперимент веб страницы отображение которой осуществляется “от первого лица” через солнцезащитные очки.