Как сделать линии при наведении css

Transition: delay и duration

схема

Всё ещё ищете ответ? Посмотрите другие вопросы с метками html css css-animation или задайте свой вопрос.

дизайн сайта / логотип © 2021 Stack Exchange Inc; материалы пользователей предоставляются на условиях лицензии cc by-sa. rev 2021.12.3.40888

Нажимая «Принять все файлы cookie» вы соглашаетесь, что Stack Exchange может хранить файлы cookie на вашем устройстве и раскрывать информацию в соответствии с нашей Политикой в отношении файлов cookie.

Как сделать — Подсказки при наведении

Узнать, как создать подсказки при наведении с помощью CSS.

Наведите курсор на текст ниже:

Подсказки при наведении

Шаг 1) Добавить HTML:

Пример

Шаг 2) Добавить CSS:

Пример

/* Контейнер подсказок */
.tooltip <
position: relative;
display: inline-block;
border-bottom: 1px dotted black; /* Если вы хотите, чтобы точки под перемещаемым текстом */
>

/* Текст подсказки */
.tooltip .tooltiptext <
visibility: hidden;
width: 120px;
background-color: #555;
color: #fff;
text-align: center;
padding: 5px 0;
border-radius: 6px;

/* Расположите текст подсказки */
position: absolute;
z-index: 1;
bottom: 125%;
left: 50%;
margin-left: -60px;

/* Исчезают в подсказке */
opacity: 0;
transition: opacity 0.3s;
>

/* Подсказка стрелка */
.tooltip .tooltiptext::after <
content: "";
position: absolute;
top: 100%;
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: #555 transparent transparent transparent;
>

/* Отображение текста подсказки при наведении курсора мыши на контейнер подсказки */
.tooltip:hover .tooltiptext <
visibility: visible;
opacity: 1;
>

Совет: Зайдите на наш учебник CSS Подсказки чтобы узнать больше о подсказках.

Совет: Чтобы создать "кликабельные" подсказки, перейдите на наш учебник Как сделать — Всплывающие окна

Совет: Модели также похожи на подсказки. Зайдите на наш учебник Как сделать — Модель чтобы узнать о моделях.

При наведении на текст, появляется скрытый текст или картинка. Пример на CSS

Салютики!
Мне на ушко прошептал wordstat.yandex.ru, что вы ищите эффект, когда при наведении на текст появляется скрытый текст или картинка. В этой статье я не только выложу код этого эффекта, но и покажу, как сделать, чтобы при наведении текст или картинка появлялись и исчезали. Код не сложный, написан на обычном HTML+CSS.
Этот эффект можно использовать:

— если нужно вставить скрытую подсказку к слову;

— если нужно показать ответ на загадку;

— если нужно показать вариант ответа на тест;

— и другие варианты

При наведении на текст, появляется скрытый текст или картинка. Пример на CSS

При наведении на текст, появляется скрытый текст

В HTML вставьте вот этот код:

При наведении на текст, появляется картинка

В HTML вставьте вот этот код:

При наведении на текст, исчезает блок div с текстом

В HTML вставьте вот этот код:

При наведении на текст, исчезает блок div с картинкой

В HTML вставьте вот этот код:

Вы нашли то, что искали?! Если да, тогда в знак благодарности жмите на кнопку социальных сетей, которая размещена снизу.
Да, и подписывайтесь на обновления моего блога, здесь много вкусных тем.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *