При наведении на текст, появляется скрытый текст или картинка. Пример на CSS
Главная » Эффекты для сайта » При наведении на текст, появляется скрытый текст или картинка. Пример на CSSСалютики!
Мне на ушко прошептал wordstat.yandex.ru, что вы ищите эффект, когда при наведении на текст появляется скрытый текст или картинка. В этой статье я не только выложу код этого эффекта, но и покажу, как сделать, чтобы при наведении текст или картинка появлялись и исчезали. Код не сложный, написан на обычном HTML+CSS.
Этот эффект можно использовать:
— если нужно вставить скрытую подсказку к слову;
— если нужно показать ответ на загадку;
— если нужно показать вариант ответа на тест;
— и другие варианты
○ При наведении на текст, появляется скрытый текст
В HTML вставьте вот этот код:
<a href="#">Плиз! Наведи на меня курсор</a> <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="#">Плиз! Наведи на меня курсор</a>
<div>Спасибо! Ты крут!:)</div>
</body>
</html>
[посмотреть результат]
○ При наведении на текст, появляется картинка
В HTML вставьте вот этот код:
<a href="#">Плиз! Наведи на меня курсор</a> <div><img src="https://bloggood.ru/wp-content/themes/bloggood/images/RSS-email.png"></div>
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="#">Плиз! Наведи на меня курсор</a>
<div><img src="https://bloggood.ru/wp-content/themes/bloggood/images/RSS-email.png"></div>
</body>
</html>
[посмотреть результат]
○ При наведении на текст, исчезает блок div с текстом
В HTML вставьте вот этот код:
<a href="#">Плиз! Наведи на меня курсор</a> <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="#">Плиз! Наведи на меня курсор</a>
<div>Спасибо! Ты крут!:)</div>
</body>
</html>
[посмотреть результат]
○ При наведении на текст, исчезает блок div с картинкой
В HTML вставьте вот этот код:
<a href="#">Плиз! Наведи на меня курсор</a> <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="#">Плиз! Наведи на меня курсор</a>
<div><img src="https://bloggood.ru/wp-content/themes/bloggood/images/RSS-email.png"></div>
</body>
</html>
[посмотреть результат]
Вы нашли то, что искали?! Если да, тогда в знак благодарности жмите на кнопку социальных сетей, которая размещена снизу.
Да, и подписывайтесь на обновления моего блога, здесь много вкусных тем.
Понравился пост? Помоги другим узнать об этой статье, кликни на кнопку социальных сетей ↓↓↓
Добавить комментарий
Метки: css, html, Вебмастеру, для сайта, эффекты для сайта
Поведение курсора при наведении на текст — CSS-LIVE
По умолчанию, во всех основных браузерах, при наведении курсора мышки на текст на веб-странице, оный изменяется с обычного указателя (курсора «по умолчанию») на «текстовый» курсор. Вы можете наблюдать это на демонстрационном гиф-изображении ниже или просто протестировав это на почти что любой веб-странице.
Точнее говоря, технически спецификация не требует, чтобы курсор «по умолчанию» был по умолчанию. На самом деле, первоначальное значение свойства курсора — «auto», про это значение в спецификации сказано следующее: «Браузер сам определяет, определяет, какой курсор отображать, в зависимости от текущего контекста».
При определении значения «text» для свойства cursor спецификация поясняет: «Указывает текст, который может быть выделен.
Чаще всего отображается, как l-образный текстовый курсор.»
Но, как вы наверное знаете, это может быть переопределёно в CSS, поэтому вы можете отображать курсор, какой захотите и в любое время. Заметьте, например, на сайте SitePoint с помощью CSS переопределено поведение курсора, который находится над обычным текстом.
На данный момент я не могу припомнить другой сайт, где встречается курсор, который при наведении на текст не меняет своего поведения. Единственное, я помню, что когда на «A List Apart» был редизайн сайта, они изначально сделали точно так же, как сейчас мы наблюдаем на SitePoint, т.е. ипользовали курсов в виде стрелки (по умолчанию), но через некоторое время вернули поведение курсора назад, изменив его на курсор по умолчанию для текстов (в виде палочки)
Какое поведение правильное?
Если вы обратитесь к спецификации, то увидите, что «текстовый» курсор (вертикальный I-образный текстовый курсор) является правильным. И, если вы захотите узнать, к какому курсору привыкли люди, то вы получите точно такой же ответ, как и в спецификации — «текстовый» курсор.
Я думаю, что на данном этапе нет смысла стараться изменить то, как с этим справляются браузеры и разработчики. Тем более все браузеры делают это самостоятельно, в результате чего проще всего иметь одно и тоже поведение практически везде — даже если оно неправильное.
Но я не могу отделаться от мысли: не идет ли это вразрез с поведением обычных приложений?
Здесь это случается в каждом браузере, когда мы передвигаем курсор в адресную строку:
Это получилось не потому что этот текст находится в адресной строке, а потому что это редактируемый текст. Как насчет других мест в браузере Chrome, например, на странице настроек:
Заметьте, что на странице настроек в браузере Chrome (которая является простой веб-страницей, внутри которой вы можете проинспектировать элемент и посмотреть код) переопределено дефолтное поведение при помощи значения «default» свойства
Они, вероятно, сделали это, чтобы сохранить страницу настроек настолько похожей на программный интерфейс, насколько это возможно, даже несмотря на то, что это всё ещё только веб-страница.
Следовательно, пользователь может видеть, что текст на этой странице не редактируется, чего не скажешь о тексте в поле поиска.
Вот типичная логика для обычных приложений: редактируемый текст использует вертикальный I-образный текстовый курсор, в то время как обычный, нередактируемый текст использует дефолтную стрелку-указатель.
Дополнение: Как было отмечено в комментариях, многие заметили, что родные приложения используют I-образный текстовый курсор не только для редактируемого, но также и для любого выделяемого текста. Это имеет место в большинстве случаев. Лично я думаю, что I-образный текстовый курсор больше подходит в качестве индикатора «вставки текста» или «редактирования этого текста», чем индикатор выбора. И так же я считаю, что есть «родные» приложения, включающие выделяемый текст, в которых курсор является простой дефолтной стрекой-указателем. Но это не очень частая вещь, так что я в какой-то мере снимаю свои аргументы насчет обычных приложений, если рассматривать I-образный курсор как универсальный индикатор для выделяемого и редактируемого текста.
Заключение
Я не знаю исторической причины, по которой браузеры используют «текстовый» курсор на нередактируемом тексте. Некоторые сайты, такие как SitePoint, признали, что в этом отношении, может быть, было бы лучше следовать общим правилам.
На любой веб-странице, я думаю, это имеет больше смысла, если текстовый курсор используется для редактируемых элементов, типа textarea, input, и даже элементов с атрибутом contenteditable.
Что вы думаете? Браузеры всё время ошибались? Я не думаю, что мы сможем здесь повлиять на что-либо, но я полагаю, что если мы дождемся момента, когда используемые браузеры будут автообновляться, производители могли бы договориться использовать более интуитивное родное поведение в этом отношении.
Охх, и приношу извинения за все анимированные курсоры. Уверен, они ни у кого не вызвали раздражения 🙂
Оригинал статьи и автор
P.S. Это тоже может быть интересно:
html — отображать текст при наведении
спросил
Изменено 2 года, 4 месяца назад
Просмотрено 10 тысяч раз
При наведении курсора на html я хочу отобразить текст.
Сейчас у меня так:
echo "";
Проблема в том, что он выглядит очень маленьким и без дизайна. Как я мог бы сделать его больше и с небольшим взглядом?
Я хотел бы сделать что-то подобное в html. Поле, которое появляется справа
- html
- css
Дополнительную информацию см. здесь
корпус {
выравнивание текста: по центру;
}
.подсказка {
положение: родственник;
отображение: встроенный блок;
курсор: по умолчанию;
}
.tooltip .tooltiptext {
видимость: скрытая;
набивка: 0,25 см 0,5 см;
цвет фона: черный;
цвет: #fff;
выравнивание текста: по центру;
радиус границы: 0,25 em;
пробел: nowrap;
/* Размещение всплывающей подсказки */
положение: абсолютное;
z-индекс: 1;
верх: 100%;
слева: 100%;
свойство перехода: видимость;
задержка перехода: 0 с;
}
.tooltip: наведение .tooltiptext {
видимость: видимая;
задержка перехода: 0,3 с;
} Наведите на меня курсор Текст всплывающей подсказки
Вот как вы можете это сделать.
Сначала создайте основной элемент, я использую текст, а рядом с ним добавьте текст, который вы хотите показывать при наведении. Стилизуйте все на свой вкус. Убедитесь, что для отображения дополнительного текста установлено значение none . По сути, мы скроем его и покажем, только когда кто-то наведет курсор на основной элемент.
Теперь в CSS я добавил .Main-Text:hover + .Extra-Text CSS Selector для достижения того, что мы пытаемся сделать. В основном это означает, что когда кто-то наводит курсор на элемент с классом Main-Text , что-то происходит с элементом с классом Extra-Text .
Подробнее об этом можно прочитать здесь.
* {
поле: 0px;
отступ: 0px;
}
тело {
дисплей: гибкий;
flex-направление: столбец;
выравнивание элементов: по центру;
поле сверху: 20px;
мин-высота: 100вх;
}
.Main-Text: hover + .Extra-Text {
дисплей: блок;
}
.Дополнительный текст {
цвет фона: #FFFFFF;
поле сверху: 10px;
ширина: 200 пикселей;
граница: 2px сплошная #000000;
отступ: 10 пикселей;
размер шрифта: 16 пикселей;
дисплей: нет;
}
<дел>
Наведите меня, чтобы узнать обо мне больше.
<дел>
Это дополнительная информация, которая будет отображаться при наведении на текст.
8.9.custom.min.js
.. просто хотел указать, что вы используете слишком много повторяющегося кода CSS и что лучше НЕ использовать встроенный CSS, но все CSS должны быть в таблице стилей и ссылка на него в тэгах головы.