Помощник
|
Как вывести текст при наведении на изображение? |
meduza_hb
|
Сообщение
#1
|
||
|
|
||
|
|||
Sanya_zik |
15.10.2016, 21:29;
Ответить: Sanya_zik
Сообщение
#2
|
|
<!DOCTYPE html> <html lang="ru"> <head> <meta charset="UTF-8"> <title>Document</title> <style> div { position: relative; width: 544px; height: 184px; background-color: #eee; margin: 0 auto; } span { display: none; position: absolute; width: 100%; height: 20px; bottom: 0; text-align: center; color: #eee; background-color: rgba(0, 0, 0, .5); } img:hover + span { display: block; } </style> </head> <body> <div> <img src="https://www.google.com.ua/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png" alt=""> <span>Какой-то текст</span> </div> </body> </html> Скопируйте в блокнот, сохраните как index.html и запустите в браузере. При наведении будет появляться span с текстом "Какой-то текст". Если вы что-то другое имели ввиду, уточните. P.S. Псевдо-элементы ::after и ::before на <img> не работают. |
|
|
x-line |
18.10.2016, 21:22;
Ответить: x-line
Сообщение
#3
|
|
а не проще ли просто атрибут title="текст" дописать картинке ?
|
|
|
|
Похожие темы
Тема | Ответов | Автор | Просмотров | Последний ответ | |
---|---|---|---|---|---|
Арбитражники, как ведете учет расходов и доходов? | 12 | Boymaster | 1906 | Сегодня, 21:03 автор: MisterBit |
|
Как вывести деньги в Украине с заблокированного Юмани ? | 29 | freeax | 4812 | 17.4.2024, 1:19 автор: sergio11 |
|
Как вы отдыхаете от работы за компом | 148 | adw-kupon.ru | 19711 | 8.4.2024, 10:37 автор: Skyworker |
|
Как вы бросили работу и перешли на заработок с сайтов? | 18 | uahomka | 3104 | 5.4.2024, 5:53 автор: Skyworker |
|
Как бездомные хранят деньги? | 81 | metvekot | 13657 | 31.3.2024, 12:44 автор: Boymaster |
Текстовая версия | Сейчас: 19.4.2024, 23:54 |