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 [631 просмотр]