Как реализовать на css3 плавное появление элемента. Всплывающая подсказка на CSS
Салютики!
Мне на ушко прошептал wordstat.yandex.ru, что вы ищите эффект, когда при наведении на текст появляется
скрытый текст или картинка
. В этой статье я не только выложу код этого эффекта, но и покажу, как сделать, чтобы при наведении текст или картинка появлялись и исчезали. Код не сложный, написан на обычном HTML+CSS.
Этот эффект можно использовать:
Если нужно вставить скрытую подсказку к слову;
Если нужно показать ответ на загадку;
Если нужно показать вариант ответа на тест;
И другие варианты
○ При наведении на текст, появляется скрытый текст
Здесь мы указали ширину блока, фоновый цвет, тени, внешние и внутренние отступы, а также скрыли блок с описанием. Т. е. он будет появляться только при наведение на него мышью.
Шаг 4. Псевдоэлемент:hover
На данном шаге мы пропишем стили для псевдоэлемента:hover. Т.е. действие, которое будет совершаться при наведении курсора на блок с картинкой:
Здесь мы указали свойство display: block;
. Это нужно для того, чтобы элемент появлялся при наведении на него мышью. Также мы указали значение z-index: 99.
Если на данном шаге посмотреть результат, то мы увидим, что при наведении появляется блок с описанием. Но, при этом картинка уходит на задний план. Чтобы решить данную проблему нам нужно прописать следующие стили:
Item:hover img {
z-index: 999;
}
Мы придали свойству z-index
значение 999
. Это говорит о том, что теперь картинка находится выше всех остальных элементов. Поэтому, ее теперь будет видно при наведении мышью.
На этом данный урок закончен. Спасибо за внимание.
Влад Мержевич
В HTML уже есть глобальный атрибут title
, который можно добавить к любому элементу веб-страницы. Наличие этого атрибута добавляет всплывающую подсказку, которая появляется при наведении курсора мыши на элемент. Шрифт текста, размер подсказки и её вид в целом зависит от операционной системы и не может быть изменён с помощью стилей. К тому же многих разработчиков не устраивает, что такая подсказка довольно быстро исчезает. Это заставляет искать способы сделать свою всплывающую подсказку, которая была бы оформлена желаемым образом. Конечно, самый универсальный способ заключается , но в некоторых случаях вполне достаточно обойтись и одним CSS.
В качестве примера я выбрал фотографии, при наведении на них курсора мыши показывается название фотографии. Сам вывод текста будем делать при помощи свойства content
и брать значение текста из какого-либо атрибута через attr()
. К сожалению, content
не будет работать желаемым образом в сочетании с img
, поэтому фотографии вставляются в элемент
, к которому добавляем атрибут data-title
с текстом всплывающей подсказки. Есть соблазн вставить атрибут title
и задействовать его, но в таком случае будет выводиться одновременно две подсказки: одна «родная», а вторая наша. Так что мы используем свой собственный атрибут data-title
, благо HTML5 позволяет это делать. Таким образом получим следующий код (пример 1).
Пример 1. Код HTML
HTML5
IE
Cr
Op
Sa
Fx
Всплывающая подсказка на CSS
Переходим к стилю нашей подсказки. Вначале надо сделать, чтобы она вообще появлялась. Для этого воспользуемся псевдоэлементом ::after
, к которому добавляем content: attr(data-title)
.
Photo::after {
content: attr(data-title);
}
Получится, что после содержимого элемента с классом photo
будет выводиться текст из атрибута data-title
, что нам и требовалось. Но поскольку всплывающая подсказка должна появляться только при наведении на фотографию курсора мыши, добавим ещё псевдокласс :hover
.
Photo:hover::after {
content: attr(data-title);
}
Остаётся только задать желаемый стиль нашей подсказки, в частности, положение, цвет фона, текста, рамку и др. (пример 2).
Положение подсказки не зависит от позиции курсора, она появляется в одном и том же месте при наведении курсора на изображение. Можно сделать, чтобы подсказка выводилась в нижней части фотографии, так она не будет закрывать большую часть картинки. Стиль при этом поменяется незначительно (пример 3).
Пример 3. Вывод подсказки внизу фотографии
HTML5
CSS3
IE
Cr
Op
Sa
Fx
Всплывающая подсказка на CSS
Результат данного примера показан на рис. 2.
Рис. 2. Вид всплывающей подсказки
К сожалению, свойство transition
, с помощью которого можно сделать анимацию подсказки, не работает с псевдоэлементами. Поэтому придётся довольствоваться резким появлением нашей всплывающей подсказки. Также не будет никакого эффекта в браузере IE8 и младше, эта версия не поддерживает ::after
. Впрочем, если заменить этот псевдоэлемент на :after
, то можно получить более-менее работающий вариант.
