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

Вопрос задан

Изменён 1 год 4 месяца назад

Просмотрен 294 раза

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

<p title="Этот текст будет показан при наведении">Просто текст</p>

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

<div>
                <div>
                                        <a href="tel:+79829349099"><span>+7 (982)</span> 934-90-99</a>
                    <div>Работаем без выходных, с 8:00 до 21:00</div>
                </div>

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

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

<div>
        <ul>
            <li><u><a href="#">Просто текст</a></u></li>
            <li><u><a href="#">Просто текст</a></u></li>
            <li><u><a href="#">Просто текст</a></u>
                <ul><div>
                    <div><li><a href="#">Просто текст</a></li></div>
                    <div><li><a href="#">Просто текст</a></li></div>
                    <div><li><a href="#">Просто текст</a></li></div>
                    <div><li><a href="#">Просто текст</a></li></div>
                    <div><li><a href="#">Просто текст</a></li></div>
                </div></ul></li>
            <li><u><a href="#">Просто текст</a></u></li>
            <li><u><a href="#">Просто текст</a></u></li>
        </ul>
    </div>
. 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 { list-style-type: none; display: inline-block; height: 100% }

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

2

Зарегистрируйтесь или войдите

Регистрация через Google

Регистрация через Facebook

Регистрация через почту

Отправить без регистрации

Почта

Необходима, но никому не показывается

Отправить без регистрации

Почта

Необходима, но никому не показывается

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

html — Не работает выпадающее меню через CSS (hover)

Задать вопрос

Вопрос задан

1 год 9 месяцев назад

Изменён 1 год 9 месяцев назад

Просмотрен 258 раз

Я только начала учиться, уже возникают небольшие проблемки:( Уже все перепробовала и перепроверила, не появляется выпадающее меню при наведении. Делала по уроку.

.root {
  list-style-type: none;
  display: inline-block;
  position: relative;
  padding: 10px 15px;
  background-color: #ccc;
  cursor: pointer;
}
.root:hover {
  position: relative;
  display: inline-block;
  background-color: aqua;
}
.root:hover .dropdown {
  display: block;           // Вот тут не работает
  background-color: #ccc;
}
.dropdown {
  display: none;
  position: absolute;
  top: 54px;
  left: 48px;
  box-sizing: border-box;
  background-color: aquamarine;
  padding: 10px;
  width: 100%;
}
.dropdown>li {
  cursor: pointer;
  list-style: none;
}
.dropdown>li:hover {
  color: aqua;
}
<body>
  <ul>
    <li>Меню</li>
    <ul>
      <li>1-й элемент</li>
      <li>2-й элемент</li>
    </ul>
    <li>Меню 2</li>
    <ul>
      <li>3-й элемент</li>
      <li>4-й элемент</li>
    </ul>
  </ul>
</body>
  • html
  • css
  • меню
  • hover

2

Нужно было вложить . dropdown в .root

.root {
  list-style-type: none;
  display: inline-block;
  position: relative;
  padding: 10px 15px;
  background-color: #ccc;
  cursor: pointer;
}
.root:hover {
  position: relative;
  display: inline-block;
  background-color: aqua;
}
.root:hover .dropdown {
  display: block;
  background-color: #ccc;
}
.dropdown {
  display: none;
  position: absolute;
  top: 54px;
  left: 48px;
  box-sizing: border-box;
  background-color: aquamarine;
  padding: 10px;
  width: 100%;
}
.dropdown>li {
  cursor: pointer;
  list-style: none;
}
.dropdown>li:hover {
  color: aqua;
}
<body>
  <ul>
    <li>Меню
      <ul>  // .dropdown находится внутри .root
        <li>1-й элемент</li>
        <li>2-й элемент</li>
      </ul>
    </li>
    <li>Меню 2
      <ul>
        <li>3-й элемент</li>
        <li>4-й элемент</li>
      </ul>
    </li>
  </ul>
</body>

2

Зарегистрируйтесь или войдите

Регистрация через Google

Регистрация через Facebook

Регистрация через почту

Отправить без регистрации

Почта

Необходима, но никому не показывается

Отправить без регистрации

Почта

Необходима, но никому не показывается

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Bootstrap Dropdown Hover

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

Зависимости компонентов

Требуются файлы jQuery, Bootsrap 3.x CSS и JavaScript. Зависит от компонента Bootstrap Dropdown и animate.css, если вы хотите использовать анимацию.

Установка

Просто включите стиль Dropdownhover и файлы сценариев после Bootstrap.

 

  <голова>
    Шаблон Bootstrap 101
    
    <ссылка href="css/bootstrap.min.css" rel="таблица стилей">
    
    <ссылка href="css/animate.min.css" rel="таблица стилей">
    
  
  <тело>
     

Привет, мир!

Пример

Оберните триггер раскрывающегося списка и раскрывающееся меню в .dropdown , поскольку это важно. Добавьте data-hover="dropdown" к основной кнопке действия или ссылке, чтобы активировать событие hover .

 <дел>
  

Выравнивание

В основном выпадающее меню позиционируется с помощью CSS, но если выпадающее меню находится за пределами области просмотра, оно позиционируется с помощью JavaScript в соответствии с окном. Также выпадающее меню поддерживает классы .dropdown-menu-right и .pull-right для выравнивания выпадающего меню вправо.

Возможны проблемы с обрезкой

Выпадающее меню использует CSS и JavaScript для позиционирования, но есть некоторые проблемы с «длинными» выпадающими меню на маленьких экранах. Плагин автоматически пытается найти лучшее решение, но есть вероятность, что часть выпадающего списка будет обрезана. Поэтому старайтесь избегать выпадающих меню, которых больше 9.0017 500px высота.

 
    ...
или же
  • ...
  • Tree

    Добавьте data-hover="dropdown" в

    или
      , чтобы Dropdownhover работал со всей навигацией

       ...
      
      Анимации

      Добавьте data-animations="{bottom} {left} {top} {right}" , чтобы включить пользовательскую анимацию. Использование animate.css также может быть анимировано с помощью пользовательских анимаций, поскольку имена анимаций являются классами CSS для анимаций.

      Нижняя анимация DefaultbouncebounceInbounceInDownbounceInLeftbounceInRightbounceInUpfadeInfadeInDownfadeInLeftfadeInRightfadeInUpflipflipInXflipInYrotateInrotateInDownLeftrotateInDownRightrotateInUpLeftrotateInUpRightslideInDownslideInLeftslideInRightslideInUpzoomInzoomInDownzoomInLeftzoomInRightzoomInUpflashhingelightSpeedInpulserubberBandshakeswingtadawobble

      Левая анимация DefaultbouncebounceInbounceInDownbounceInLeftbounceInRightbounceInUpfadeInfadeInDownfadeInLeftfadeInRightfadeInUpflipflipInXflipInYrotateInrotateInDownLeftrotateInDownRightrotateInUpLeftrotateInUpRightslideInDownslideInLeftslideInRightslideInUpzoomInzoomInDownzoomInLeftzoomInRightzoomInUpflashhingelightSpeedInpulserubberBandshakeswingtadawobble

      Top animation DefaultbouncebounceInbounceInDownbounceInLeftbounceInRightbounceInUpfadeInfadeInDownfadeInLeftfadeInRightfadeInUpflipflipInXflipInYrotateInrotateInDownLeftrotateInDownRightrotateInUpLeftrotateInUpRightslideInDownslideInLeftslideInRightslideInUpzoomInzoomInDownzoomInLeftzoomInRightzoomInUpflashhingelightSpeedInpulserubberBandshakeswingtadawobble

      Правая анимация DefaultbouncebounceInbounceInDownbounceInLeftbounceInRightbounceInUpfadeInfadeInDownfadeInLeftfadeInRightfadeInUpflipflipInXflipInYrotateInrotateInDownLeftrotateInDownRightrotateInUpLeftrotateInUpRightslideInDownslideInLeftslideInRightslideInUpzoomInzoomInDownzoomInLeftzoomInRightzoomInUpflashhingelightSpeedInpulserubberBandshakeswingtadawobble

       data-animations="fadeInDown fadeInLeft fadeInUp fadeInRight" 

      How To Create An On Hover Dropdown Menu With HTML & CSS | Ндубуиси Агбанду

      Фото: Line25. com

      Вероятно, вы сталкивались с веб-страницей с подобными вещами, и вам интересно, как это было сделано?

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

      Программирование основано на логике, а не на коде: потому что для получения одного и того же результата можно использовать разные коды и подходы.

      ШАГИ

      #1. Откройте текстовый редактор и введите в нем обычный HTML-код. Например, doctype, html, head и т. д.

      #2. В элементе body откройте div с элементом внутри него. Элемент может быть элементом кнопки, элементом привязки (a) и т. д. а затем дайте ему имя класса.

      #3. Откройте другой div с именем класса внутри первого div. Именно внутри этого div вы поместите свое выпадающее содержимое. См. код ниже…

        



      Учебное пособие по выпадающему меню при наведении




      ШАГИ CSS

      1. Присвойте контейнеру отображение встроенного блока и положение относительно всего экрана, используя следующий код:
       .dropdown { 
      display: inline-block;
      должность: родственник;
      }

      2. Присвойте другому div(.dropdown-content) внутри первого контейнера display: none и position: absolute, используя следующий код:

       .dropdown-content { 
      display: none;
      позиция: блок;
      }

      3.