Текст при наведении на картинку css: Как добавить всплывающую подсказку к изображению?

Разное 

html — Как сделать появление текста когда я навожу на картинку с помощью hover? См. описание

Как сделать, то что я написал в заголовке? Но, нужно чтобы картинка была добавлена с помощью img а не в css с background. Тоесть просто вот так в html коде написать:

<div>
<img src="...">
</div>
  • html
  • css

2

Как вариант, в родительском блоке, где расположена картинка, можно разместить дочерний блок со свойством opacity: 0;. И при наведении на родительский блок, показывать дочерний. Ну как-то так:

.block {
  display: block;
  position: relative;
  overflow: hidden;
  width: 300px;
  height: 300px;
  border: 20px solid #f1f1f1;
}

.block img {
  display: block;
  position: relative;
  width: 300px;
  height: 300px;
}

.block__text {
  display: block;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  width: 300px;
  height: 300px;
  background-color: #f1f1f1;
  opacity: 0;
  -webkit-transition: all 0.
 
 7s ease-in-out;
  -moz-transition: all 0.7s ease-in-out;
  -ms-transition: all 0.7s ease-in-out;
  -o-transition: all 0.7s ease-in-out;
  transition: all 0.7s ease-in-out;
}

.block:hover .block__text {
  opacity: 1;
}

h4,
p {
  text-align: center;
}
<div><img src="https://sochinyshka.ru/wp-content/uploads/2017/09/Pushkin.jpg">
  <div>
    <h4>ФОНТАНУ БАХЧИСАРАЙСКОГО ДВОРЦА</h4>
    <p>Фонтан любви, фонтан живой!<br>Принес я в дар тебе две розы.<br>Люблю немолчный говор твой<br>И поэтические слезы.<br><br><b><i>Александр Сергеевич Пушкин</i></b></p>
  </div>
</div>

0

Вам поможет JavaScript. Добавим в блок div.

<div ononmouseover="addImage()">
  <img src='...'>
<div>
<script>
  function addImage(){
    document. getElementById('test').innerHTML = '<div><img src="Новая ссылка на фото "></div>';
  }
</script>

Если нужно что бы удалении курсора все возвращалось на свои места добавьте в div и по аналогии.

Так ?

.item {
  display: inline-block;
  width: 250px;
  text-align: center;
}

.item p {
  display: none;
}

.item:hover p {
  display: block;
}
<div>
  <img src="http://placehold.it/250x80" alt="">
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nemo, velit!</p>
</div>

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

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

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

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

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

Почта

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

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

Почта

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

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

Как создать подсказки при наведении

schoolsw3. com

САМОСТОЯТЕЛЬНОЕ ОБУЧЕНИЕ ДЛЯ ВЕБ РАЗРАБОТЧИКОВ

❮ НазадВперед ❯

Узнать, как создать подсказки при наведении с помощью CSS.

Наведите курсор на текст ниже:

СверхуТекст подсказки

СправаТекст подсказки

СнизуТекст подсказки

СлеваТекст подсказки

Редактор кода »

Шаг 1) Добавить HTML:

Пример

<div>Наведите курсор на меня
  <span>Текст подсказки</span>
</div>

Шаг 2) Добавить CSS:

Пример

/* Контейнер подсказок */
.tooltip {
  position: relative;
  display: inline-block;
  border-bottom: 1px dotted black; /* Если вы хотите, чтобы точки под перемещаемым текстом */
}

/* Текст подсказки */
.tooltip .tooltiptext {
  visibility: hidden;
  width: 120px;
  background-color: #555;
  color: #fff;
  text-align: center;
  padding: 5px 0;
  border-radius: 6px;

  /* Расположите текст подсказки */
  position: absolute;
  z-index: 1;
  bottom: 125%;
  left: 50%;
  margin-left: -60px;

  /* Исчезают в подсказке */
  opacity: 0;
  transition: opacity 0. 3s;
}

/* Подсказка стрелка */
.tooltip .tooltiptext::after {
  content: «»;
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: #555 transparent transparent transparent;
}

/* Отображение текста подсказки при наведении курсора мыши на контейнер подсказки */
.tooltip:hover .tooltiptext {
  visibility: visible;
  opacity: 1;
}

Редактор кода »

Совет: Зайдите на наш учебник CSS Подсказки чтобы узнать больше о подсказках.

Совет: Чтобы создать «кликабельные» подсказки, перейдите на наш учебник Как сделать — Всплывающие окна

Совет: Модели также похожи на подсказки. Зайдите на наш учебник Как сделать — Модель чтобы узнать о моделях.

❮ НазадВперед ❯

ВЫБОР ЦВЕТА
ТОП Учебники
HTML Учебник
CSS Учебник
JavaScript Учебник
КАК Учебник
SQL Учебник
Python Учебник
W3. CSS Учебник
Bootstrap Учебник
PHP Учебник
Java Учебник
C++ Учебник
jQuery Учебник
ТОП Справочники
HTML Справочник
CSS Справочник
JavaScript Справочник
SQL Справочник
Python Справочник
W3.CSS Справочник
Bootstrap Справочник
PHP Справочник
HTML Цвета
Java Справочник
Angular Справочник
jQuery Справочник
ТОП Примеры
HTML Примеры
CSS Примеры
JavaScript Примеры
КАК Примеры
SQL Примеры
Python Примеры
W3.CSS Примеры
Bootstrap Примеры
PHP Примеры
Java Примеры
XML Примеры
jQuery Примеры

Форум | О SchoolsW3

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

Некоторые страницы сайта могут быть не переведены на РУССКИЙ язык, можно отправить страницу как ошибку, так же можете самостоятельно заняться переводом. Используя данный сайт, вы соглашаетесь прочитать и принять Условия к использованию, Cookies и политика конфиденциальности.

Авторское право 1999- Все права защищены.
SchoolsW3 работает на площадке от SW3.CSS.

Подсказка CSS

❮ Назад Далее ❯

Создание всплывающих подсказок с помощью CSS.

Демонстрация: примеры подсказок

Подсказка часто используется для указания дополнительной информации о чем-либо, когда пользователь наводит указатель мыши на элемент:

Верх Текст всплывающей подсказки

Справа Текст всплывающей подсказки

Внизу Текст всплывающей подсказки

Слева Текст всплывающей подсказки

Основная подсказка

Создайте всплывающую подсказку, которая появляется, когда пользователь наводит указатель мыши на элемент:

Пример

Наведение надо мной
  Подсказка text

Попробуйте сами »

Объяснение примера

HTML: Используйте элемент-контейнер (например,

) и добавьте "подсказка" класс к нему. Когда пользователь наведет курсор на этот
, он покажет текст всплывающей подсказки.

Текст всплывающей подсказки помещается внутри встроенного элемента (например, ) с class="tooltiptext" .

CSS: Всплывающая подсказка class use position:relative , который необходим для позиционирования текста всплывающей подсказки ( position:absolute ). Примечание: См. ниже примеры того, как расположить всплывающую подсказку.

класс tooltiptext

содержит фактический текст всплывающей подсказки. Это скрыт по умолчанию и будет виден при наведении курсора (см. ниже). Мы также добавили некоторые основные стили: ширина 120 пикселей, черный цвет фона, белый цвет текста, текст по центру и отступы по 5 пикселей сверху и снизу.

Свойство CSS border-radius используется для добавления закругленных углов во всплывающую подсказку. текст.

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

с помощью класс="подсказка" .

Позиционирование всплывающих подсказок

В этом примере всплывающая подсказка размещается справа ( слева:105% ) от «наводимого» текст (<дел>). Также обратите внимание, что top:-5px используется для размещения его в середине элемента-контейнера. Мы используем число 5 , потому что текст всплывающей подсказки имеет верх и нижняя прокладка 5 пикселей. Если вы увеличите его заполнение, также увеличьте значение свойства top до убедитесь, что он остается посередине (если вы этого хотите). Одинаковый применяется, если вы хотите, чтобы всплывающая подсказка располагалась слева.

Правая подсказка

.tooltip .tooltiptext {
  top: -5px;
левый: 105%;
}

Результат:

Наведите курсор на меня Текст подсказки

Попробуйте сами »

Левая подсказка

.tooltip .tooltiptext {
  top: -5px;
верно: 105%;
}

Результат:

Наведите курсор на меня Текст всплывающей подсказки

Попробуйте сами »

Если вы хотите, чтобы всплывающая подсказка отображалась сверху или снизу, см. примеры ниже. Обратите внимание, что мы используем свойство margin-left со значением минус 60 пикселей. Это нужно для того, чтобы центрировать всплывающую подсказку над/под наводимым текстом. Установлено до половины ширины всплывающей подсказки (120/2 = 60).

Верхняя подсказка

.tooltip .tooltiptext {
  ширина: 120 пикселей;
низ: 100%;
  осталось: 50%;
  левое поле: -60 пикселей; /* Использовать половину ширины (120/2 = 60), чтобы центрировать всплывающую подсказку */
}

Результат:

Наведите курсор на меня Текст всплывающей подсказки

Попробуйте сами »

Нижняя подсказка

.tooltip .tooltiptext {
  ширина: 120 пикселей;
  сверху: 100 %;
  осталось: 50%;
  левое поле: -60 пикселей; /* Использовать половину ширины (120/2 = 60), чтобы центрировать всплывающую подсказку */
}

Результат:

Наведите курсор на меня Текст всплывающей подсказки

Попробуйте сами »

Стрелки всплывающей подсказки

Чтобы создать стрелку, которая должна появляться с определенной стороны всплывающей подсказки, добавьте «пусто» содержание после всплывающая подсказка с классом псевдоэлемента ::после вместе с содержимым свойство. Сама стрелка создается с помощью границ. Это сделает всплывающую подсказку выглядеть как речевой пузырь.

В этом примере показано, как добавить стрелку внизу всплывающей подсказки:

Нижняя стрелка

.tooltip .tooltiptext::after {
  content: » «;
  позиция: абсолютная;
  сверху: 100 %; /* Внизу подсказки */
  left: 50%;
  левое поле: -5 пикселей;
ширина границы: 5px;
  стиль границы: сплошной;
цвет границы: черный прозрачный прозрачный прозрачный;
}

Результат:

Наведите курсор на меня Текст всплывающей подсказки

Попробуйте сами »

Объяснение примера

Поместите стрелку внутри всплывающей подсказки: сверху: 100% поместит стрелку в нижней части всплывающей подсказки. слева: 50% будет центрировать стрелку.

Примечание: Свойство border-width указывает размер стрелка. Если вы измените это, также измените margin-left значение то же самое. Этот будет держать стрелку в центре.

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

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

Верхняя стрелка

.tooltip .tooltiptext::after {
  содержимое: » «;
  позиция: абсолютная;
  внизу: 100 %; /* В верхней части всплывающей подсказки */
  left: 50%;
  левое поле: -5 пикселей;
ширина границы: 5px;
  стиль границы: сплошной;
цвет границы: прозрачный прозрачный черный прозрачный;
}

Результат:

Наведите курсор на меня Текст всплывающей подсказки

Попробуйте сами »

В этом примере показано, как добавить стрелку слева от всплывающей подсказки:

Стрелка влево

. tooltip .tooltiptext::after {
  содержимое: » «;
  позиция: абсолютная;
  вверху: 50 %;
  справа: 100 %; /* Слева от всплывающей подсказки */
  margin-top: -5px;
ширина границы: 5px;
  стиль границы: сплошной;
цвет границы: прозрачный черный прозрачный прозрачный;
}

Результат:

Наведите курсор на меня Текст всплывающей подсказки

Попробуйте сами »

В этом примере показано, как добавить стрелку справа от всплывающей подсказки:

Стрелка вправо

.tooltip .tooltiptext::after {
  содержимое: » «;
  позиция: абсолютная;
  вверху: 50 %;
осталось: 100%; /* Справа от всплывающая подсказка */
  margin-top: -5px;
ширина границы: 5px;
  стиль границы: сплошной;
цвет границы: прозрачный прозрачный прозрачный черный;
}

Результат:

Наведите курсор на меня Текст всплывающей подсказки

Попробуйте сами »

Исчезновение всплывающих подсказок (анимация)

может использовать CSS свойство перехода вместе с непрозрачностью свойства и перейти от полностью невидимого к 100% видимому за определенное количество секунд. (1 секунда в нашем примере):

Пример

.tooltip .tooltiptext {
  непрозрачность: 0;
переход: непрозрачность 1с;
}

.tooltip:наведение .tooltiptext {
  непрозрачность: 1;
}

Попробуйте сами »

❮ Предыдущая Далее ❯


Как создавать всплывающие подсказки

❮ Предыдущий Далее ❯

Узнайте, как создавать всплывающие подсказки с помощью CSS.

Наведите курсор на текст ниже:

Верх Текст всплывающей подсказки

Справа Текст всплывающей подсказки

Внизу Текст всплывающей подсказки

Слева Текст всплывающей подсказки

Попробуйте сами »

Шаг 1) Добавьте HTML:

Пример

Наведите курсор на меня
  Подсказка text

Шаг 2) Добавьте CSS:

Пример

/* Контейнер всплывающей подсказки */
. tooltip {
  position: родственник;
  отображение: встроенный блок;
  border-bottom: 1 пиксель с черными точками; /* Если вам нужны точки под наводимым text */
}

/* Текст всплывающей подсказки */
.tooltip .tooltiptext {
  видимость: скрыто;
  ширина: 120 пикселей;
  background-color: #555;
цвет: #fff;
выравнивание текста: по центру;
  отступ: 5 пикселей 0;
  Радиус границы: 6 пикселей;

/* Разместите текст всплывающей подсказки */
  позиция: абсолютная;
z-индекс: 1;
  внизу: 125 %;
  осталось: 50%;
  левое поле: -60 пикселей;

  /* Исчезновение всплывающей подсказки */
  opacity: 0;
  переход: непрозрачность 0,3 с;
}

/* Стрелка всплывающей подсказки */
.tooltip .tooltiptext::after {
  содержимое: «»;
  позиция: абсолютный;
  сверху: 100 %;
осталось: 50%;
  левое поле: -5 пикселей;
  ширина границы: 5 пикселей;
  стиль границы: сплошной;
  border-color: #555 прозрачный прозрачный прозрачный;
}

/* Показать текст всплывающей подсказки, когда вы наводите указатель мыши на контейнер всплывающей подсказки */
. tooltip:hover .tooltiptext {
видимость: видимая;
  непрозрачность: 1;
}

Попробуйте сами »

Совет: Перейдите к нашему учебнику по подсказкам CSS, чтобы узнать больше о подсказки.

Совет: Чтобы создать интерактивные всплывающие подсказки, перейдите к нашему учебному пособию по созданию всплывающих окон

Совет: Модальные окна также похожи на всплывающие подсказки. Перейдите к нашему учебному пособию по созданию модальных окон, чтобы узнать о модальные.

❮ Предыдущий Следующий ❯


ВЫБОР ЦВЕТА

Лучшие учебники
Учебник по HTML
Учебник по CSS
Учебник по JavaScript
Учебник How To Tutorial
Учебник по SQL
Учебник по Python
Учебник по W3.CSS
Учебник по Bootstrap
Учебник по PHP
Учебник по Java
Учебник по C++
Учебник по jQuery

9003 Справочник Справочник по HTML
Справочник по CSS
Справочник по JavaScript
Справочник по SQL
Справочник по Python
Справочник по W3.

No related posts.

Автор записи

Добавить комментарий

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