Салютики!
Мне на ушко прошептал wordstat.yandex.ru, что вы ищите эффект, когда при наведении на текст появляется скрытый текст или картинка. В этой статье я не только выложу код этого эффекта, но и покажу, как сделать, чтобы при наведении текст или картинка появлялись и исчезали. Код не сложный, написан на обычном HTML+CSS.
Этот эффект можно использовать:
- если нужно вставить скрытую подсказку к слову;
- если нужно показать ответ на загадку;
- если нужно показать вариант ответа на тест;
- и другие варианты
○ При наведении на текст, появляется скрытый текст
В HTML вставьте вот этот код:
<a href="#" class="bloggood-ru-ssilka">Плиз! Наведи на меня курсор</a> <div class="bloggood-ru-div">Спасибо! Ты крут!:)</div>
В CSS:
.bloggood-ru-div
{
display: none;
}
a.bloggood-ru-ssilka:hover+div
{
display: block;
}
Готовый код:
<html>
<head>
<title>При наведении на текст, появляется скрытый текст - BlogGood.ru</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style>
.bloggood-ru-div
{
display: none;
}
a.bloggood-ru-ssilka:hover+div
{
display: block;
}
</style>
</head>
<body>
<a href="#" class="bloggood-ru-ssilka">Плиз! Наведи на меня курсор</a>
<div class="bloggood-ru-div">Спасибо! Ты крут!:)</div>
</body>
</html>
○ При наведении на текст, появляется картинка
В HTML вставьте вот этот код:
<a href="#" class="bloggood-ru-ssilka">Плиз! Наведи на меня курсор</a> <div class="bloggood-ru-div"><img src="https://bloggood.ru/wp-content/themes/bloggood/images/RSS-email.png"></div>
В CSS:
.bloggood-ru-div
{
display: none;
}
a.bloggood-ru-ssilka:hover+div
{
display: block;
}
Готовый код:
<html>
<head>
<title>При наведении на текст, появляется скрытый текст - BlogGood.ru</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style>
.bloggood-ru-div
{
display: none;
}
a.bloggood-ru-ssilka:hover+div
{
display: block;
}
</style>
</head>
<body>
<a href="#" class="bloggood-ru-ssilka">Плиз! Наведи на меня курсор</a>
<div class="bloggood-ru-div"><img src="https://bloggood.ru/wp-content/themes/bloggood/images/RSS-email.png"></div>
</body>
</html>
○ При наведении на текст, исчезает блок div с текстом
В HTML вставьте вот этот код:
<a href="#" class="bloggood-ru-ssilka">Плиз! Наведи на меня курсор</a> <div class="bloggood-ru-div">Спасибо! Ты крут!:)</div>
В CSS:
.bloggood-ru-div
{
display: block;
}
a.bloggood-ru-ssilka:hover+div
{
display: none;
}
Готовый код:
<html>
<head>
<title>При наведении на текст, появляется скрытый текст - BlogGood.ru</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style>
.bloggood-ru-div
{
display: block;
}
a.bloggood-ru-ssilka:hover+div
{
display: none;
}
</style>
</head>
<body>
<a href="#" class="bloggood-ru-ssilka">Плиз! Наведи на меня курсор</a>
<div class="bloggood-ru-div">Спасибо! Ты крут!:)</div>
</body>
</html>
○ При наведении на текст, исчезает блок div с картинкой
В HTML вставьте вот этот код:
<a href="#" class="bloggood-ru-ssilka">Плиз! Наведи на меня курсор</a> <div class="bloggood-ru-div"><img src="https://bloggood.ru/wp-content/themes/bloggood/images/RSS-email.png"></div>
В CSS:
.bloggood-ru-div
{
display: block;
}
a.bloggood-ru-ssilka:hover+div
{
display: none;
}
Готовый код:
<html>
<head>
<title>При наведении на текст, появляется скрытый текст - BlogGood.ru</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style>
.bloggood-ru-div
{
display: block;
}
a.bloggood-ru-ssilka:hover+div
{
display: none;
}
</style>
</head>
<body>
<a href="#" class="bloggood-ru-ssilka">Плиз! Наведи на меня курсор</a>
<div class="bloggood-ru-div"><img src="https://bloggood.ru/wp-content/themes/bloggood/images/RSS-email.png"></div>
</body>
</html>
Вы нашли то, что искали?! Если да, тогда в знак благодарности жмите на кнопку социальных сетей, которая размещена снизу.
Да, и подписывайтесь на обновления моего блога, здесь много вкусных тем.
Понравился пост? Помоги другим узнать об этой статье, кликни на кнопку социальных сетей ↓↓↓
Последние новости категории:
Шумящий эффект для картинки при наведении
Эффект для ссылки – радужная ссылка
Выделение цветом ссылок при наведении на параграф
Фиксированное меню при прокрутке сайтаПохожие статьи
Добавление текстового поля с использованием JavaScript
CSS3 фильтры изображений
Шрифт текста в CSS и его свойства
Популярные статьи:
-
Как узнать id компьютера
Дата: 29 марта 2013
Прокомментировано:90
просмотров: 330330 -
Размеры форматов листов А0 – А7
Дата: 23 января 2013
Прокомментировано:3
просмотров: 274683 -
Смешные логические загадки с подвохом, отгадки прилагаются
Дата: 12 ноября 2014
Прокомментировано:5
просмотров: 222437 -
Готовые макеты блоков для веб-страниц на HTML и CSS
Дата: 25 июня 2014
Прокомментировано:23
просмотров: 187489 -
Установка windows 7 на ноутбук
Дата: 18 декабря 2012
Прокомментировано:169
просмотров: 186559
6 Ответов на комментарий - При наведении на текст, появляется скрытый текст или картинка. Пример на CSS
Добавить комментарий
Метки: css, html, Вебмастеру, для сайта, эффекты для сайта
Скажите, а возможно сделать появление картинки при наведении на текст, только что бы текст был не ссылкой?
Да, можно:
<html> <head> <title>При наведении на текст, появляется скрытый текст - BlogGood.ru</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <style> .bloggood-ru-div { display: none; } p.bloggood-ru-ssilka:hover+div { display: block; } </style> </head> <body> <p class="bloggood-ru-ssilka">Плиз! Наведи на меня курсор</p> <div class="bloggood-ru-div">тут картинка</div> </body> </html>Скажите, а можно ли на WP сделать такое – при наведении курсора на миниатюру картинки поста выводилось description статьи? То есть не прописывать отдельно текст для каждой миниатюры, а чтоб оно автоматически бралось из записи и выводилось на hover. Спасибо.
Конечно можно, но я не знаю какой плагин Вы используете, для вставки description в статьи
Скажите пожалуйста, как сделать всплывающую картинку именно в статье вордпрес? Потому, что если я пишу через редактор вордпрес он не работает.
какой код используете?