БлогNot. CSS: всплывающий tooltip для элемента и подпись к картинке при наведении мыши

CSS: всплывающий tooltip для элемента и подпись к картинке при наведении мыши

Две разных, но связанных между собой задачи. В первой из них мы хотим, чтобы при наведении курсора мыши на элемент разметки, отнесённый к некоторому классу CSS, появлялось "окошечко" с подписью, картинкой или другой разметкой. Во второй задаче мы имеем картинку, подпись к которой должна "выезжать" при наведении курсора мыши, а при убирании его "уезжать" обратно.

В обоих случаях нас интересует максимально простое решение, поэтому длинных украшательств постараемся избежать. Для решения задач достаточно немного CSS, а программировать ничего не нужно.

Ниже показаны стили и примеры разметки HTML для этих двух случаев, можно сохранить листинги как файлы типа .html в кодировке Юникода UTF-8, пояснения есть прямо в разметке.

<!DOCTYPE html>
<html lang="ru">
 <head>
  <meta charset="UTF-8">
  <title>Пример 1</title>

<style>
 .drag-hint {
  position: relative;
  display: inline-block;
  border: 1px dotted green; /* можно убрать, если не хотим выделять визуально "подсказочные" места */
 }
 .drag-hint > span {
  background: black;
  color: white;
  display: none;
 }
 .drag-hint:hover > span {
  display: inline-block;
  position: absolute;
  top: 25px;
  left: 50%;
  transform: translateX(-50%);
 }
</style>

 </head>
 <body>

<p>Содержимое тега span, расположенного первым внутри элемента, отнесённого к CSS-классу drag-hint, 
становится всплывающей подсказкой.</p>

<p class="drag-hint">
 <span><img src="http://blog.kislenko.net/archives/k2016/1.jpg" width="200" height="150" alt=""></span>
 Подсказка в виде картинки
</p>

<a href="http://blog.kislenko.net" target="_blank" class="drag-hint">
 <span>Нажмите, чтобы перейти в новое окно</span>
 Мой блог
</a>

<p>Другой контент</p>
<p>Подсказка внутри 
  <span class="drag-hint">
        <span>Текст подсказки</span>
 <i>этого места абзаца</i></span>, дальше опять текст.</p>


</body></html>

 Посмотреть пример 1 в работе (текущее окно/вкладка) (1 Кб)

<!DOCTYPE html>
<html lang="ru">
 <head>
  <meta charset="UTF-8">
  <title>Пример 2</title>

<style>
.image {
 display: inline-block;
 background: gray;
 position: relative;
 overflow:hidden;
}
.image img {
 width: 100%;
 height: 100%;
}
.image .tooltip {
 position: absolute;
 transform: translate(100%);
 bottom: 0;
 width: 100%;
 color: white;
 background: rgba(0, 0, 0, 0.6);
 transition: all 0.9s;
 opacity:0;
}
.image:hover .tooltip {
 position: absolute;
 transform: translate(0);
 opacity:1;
}
</style>

 </head>
 <body>

<p>При наведении курсора мыши на картинку подсказка будет "выезжать" справа налево 
в нижней части изображения на сером фоне. При убирании курсора tooltip "уезжает" обратно.

<p>В раздел класса image помещаются тег картинки img и раздел класса tooltip с текстом подписи.

<div class="image">
 <img src="http://blog.kislenko.net/archives/k2016/1.jpg" alt="">
 <div class="tooltip">Всплывающая подсказка</div>
</div>
<div class="image">
 <img src="http://blog.kislenko.net/archives/k2016/2.jpg" alt="">
 <div class="tooltip">И ещё одна</div>
</div>

</body></html>

 Посмотреть пример 2 в работе (текущее окно/вкладка) (1 Кб)

22.05.2022, 19:20 [629 просмотров]


теги: html css

К этой статье пока нет комментариев, Ваш будет первым