Всплывающее изображение при наведение мыши. Как изменить вид ссылки при наведении на нее курсора мыши? Наведение курсора мыши

В данной статье я хочу обсудить несколько вариантов организации подобной фишки в любой верстке. Кстати, живой пример такой реализации уже имеется у меня на сайте. Если прокрутите до комментариев на этой странице и наведете на дату комментария, сразу точно станет понятно, о чем речь. Ну а если же комментариев еще нет, можете его заодно и оставить.

Я вижу два основных метода реализации всплывающей подсказки, это при наведении, он же и самый популярный, и менее популярный при клике на какой-либо элемент. Начнем естественно с появления подсказки при наведении курсора на элемент.

Я думал в данной статье начать с самого примитива, вывод подсказки с помощью title , который не получится как-либо оформить, однако я думаю его можно пропустить, так как это и так понятно. Если вышесказанное Вам не совсем понятно, думаю, после изучения видео об , все станет гораздо понятней.

Простой способ с оформлением, при наведении.

Здесь все не сложнее, чем в способе, который я пропустил. Только вместо атрибута title я буду использовать data-title и оформление с помощью стилей css. Собственно привожу ниже html-код:

/* Используем псевдоэлемент after для оформления самой плашки, но при этом скрываем ее, так как она должна появляться только при наведении */ .hover:after {content: attr(data-title); display: none;position: absolute; bottom: 130%; left: 0px; background-color: #fff; color: #3aaeda; padding: 5px; text-align: center; -moz-box-shadow: 0 1px 1px rgba(0,0,0,.16); -webkit-box-shadow: 0 1px 1px rgba(0,0,0,.16); box-shadow: 0 1px 1px rgba(0,0,0,.16);font-size: 12px;} /* Добавляем свойство, чтобы при наведении на элемент плашка с подсказкой появилась */ .hover:hover:after{display: block;}

Здесь же хочу обратить Ваше внимание, что это только пример свойств оформления. Вы можете естественно оформить внешний вид плашки, как Вам угодно.

Всплывающая подсказка при наведении.

Это пожалуй самый популярный способ реализации данной возможности. По крайней мере я им пользуюсь чаще всего.

В данном примере так же не вижу ничего особенного, однако побольше, но и результат будет получше и без использования атрибута data-title . Контейнер в данном случае служит оболочкой для наших элементов, которые будут использованы для реализации подсказки. А так же сама плашка будет позиционироваться относительно контейнера.

/* задаем относительное позиционирование контейнеру */ .block{position:relative;} /* Оформление скрытого элемента по умолчанию */ .hidden {display: none; position: absolute; bottom: 130%; left: 0px; background-color: #fff; color: #3aaeda; padding: 5px; text-align: center; -moz-box-shadow: 0 1px 1px rgba(0,0,0,.16); -webkit-box-shadow: 0 1px 1px rgba(0,0,0,.16); box-shadow: 0 1px 1px rgba(0,0,0,.16); font-size: 12px;} /* Дополнительное оформление скрытого элемента(необязательно) */ .hover + .hidden:before {content: " "; position: absolute; top: 98%; left: 10%; margin-left: -5px; border-width: 5px; border-style: solid; height: 0; width: 0; border: 7px solid transparent; border-right: 7px solid #fff; border-color: #fff transparent transparent transparent; z-index: 2;} /* Дополнительное оформление скрытого элемента(необязательно) */ .hover + .hidden:after {content: " "; position: absolute; top: 100%; left: 10%; margin-left: -5px; border-width: 5px; border-style: solid; height: 0; width: 0; border: 7px solid transparent; border-right: 7px solid #fff; border-color: rgba(0,0,0,.16) transparent transparent transparent; z-index: 1;} /* Появление скрытого элемента при наведении */ .hover:hover + .hidden{display: block;}

Именно эти два варианта можно использовать у Вас на сайте для выведения всплывающей подсказки при наведении курсора.

Существуют еще два способа, однако они практически идентичны, за исключением того, что появление элемента происходить будет при клике по элементу, который всегда отображается на сайте.

Простой способ с оформлением, при клике.

В случае с кликом, код будет выглядеть абсолютно так же. Единственное, что для удобства я заменил класс некоторых элементов. А так же используется псевдокласс focus вместо hover . Еще здесь стоит отметить, что чтобы данный способ срабатывал, необходимо заменить на , то есть на гиперссылку.

?

Css код в этом случае аналогичен появлению плашки при наведении, только использованы для удобства другие классы. И для правильной работы меняем псевдокласс на focus .

/* Используем псевдокласс after для оформления самой плашки, но при этом скрываем ее, так как она должна появляться только при клике */ .focus:after {content: attr(data-title); display: none;position: absolute; bottom: 130%; left: 0px; background-color: #fff; color: #3aaeda; padding: 5px; text-align: center; -moz-box-shadow: 0 1px 1px rgba(0,0,0,.16); -webkit-box-shadow: 0 1px 1px rgba(0,0,0,.16); box-shadow: 0 1px 1px rgba(0,0,0,.16);font-size: 12px;} /* Добавляем свойство, чтобы при клике на элемент плашка с подсказкой появилась */ .focus:focus:after{display: block;}

Как видите разницы практически нет.

Всплывающая подсказка при клике.

Этот способ при клике так же будет более актуален, если Вам требуется оформить подсказку немного лучше нежели это возможно в предыдущем варианте.

И собственно оформление плашки:

/* задаем относительное позиционирование контейнеру */ .block{position:relative;} /* Оформление скрытого элемента по умолчанию */ .hidden {display: none; position: absolute; bottom: 130%; left: 0px; background-color: #fff; color: #3aaeda; padding: 5px; text-align: center; -moz-box-shadow: 0 1px 1px rgba(0,0,0,.16); -webkit-box-shadow: 0 1px 1px rgba(0,0,0,.16); box-shadow: 0 1px 1px rgba(0,0,0,.16); font-size: 12px;} /* Дополнительное оформление скрытого элемента(необязательно) */ .focus + .hidden:before {content: " "; position: absolute; top: 98%; left: 10%; margin-left: -5px; border-width: 5px; border-style: solid; height: 0; width: 0; border: 7px solid transparent; border-right: 7px solid #fff; border-color: #fff transparent transparent transparent; z-index: 2;} /* Дополнительное оформление скрытого элемента(необязательно) */ .focus + .hidden:after {content: " "; position: absolute; top: 100%; left: 10%; margin-left: -5px; border-width: 5px; border-style: solid; height: 0; width: 0; border: 7px solid transparent; border-right: 7px solid #fff; border-color: rgba(0,0,0,.16) transparent transparent transparent; z-index: 1;} /* Появление скрытого элемента при клике */ .focus:focus + .hidden{display: block;}

Как Вы можете наблюдать ничего сложного нет. К тому же можно организовать изменения состояний, как по наведению, так и по клику. Хотя я честно говоря, не могу сказать насколько актуален способ по клику.

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

Видео урок — Всплывающая подсказка без скриптов.

На этом у меня все. Всем удачи.

Меня уже не в первый раз спрашивают: как ты сделал увеличивающиеся и поворачивающиеся картинки ? Ответ прост: это магия CSS3 — и в этой статье я расскажу, как она работает. Постараюсь не умничать и написать интересно. А вы помогайте мне, помогайте.

Да, это магия CSS3, состоящая из transition и transform свойств.

Вот пример, HTML и CSS код:

Чтобы не заморачиваться с кросбраузерностью:

Figure img { -webkit-transition: -webkit-transform 0.3s; transition: transform 0.3s ease-out; } figure img:hover { -webkit-transform: rotate(-3deg) scale(1.1); transform: rotate(-3deg) scale(1.1); -webkit-transition: -webkit-transform 0.3s ease-out; transition: transform 0.3s ease-out; }

Разберём HTML вставку картинки

Для изменения картинки при наведении курсора, HTML-код не имеет особого значения. Просто это правильно и оптимально, соответствует HTML5 и хорошо для поисковой оптимизации.

• figure — контейнер фигуры (диаграммы, картинки и&nbap;т.&nbap;д.);
• figcaption — заголовок контейнера figure и около-картиночный текст (ну а как это ещё обозвать?).
• img — отображаемая картинка с адресом миниатюры в атрибуте src и кратким описанием (набором ключевиков) в alt ;
• a — ссылка на большую картинку с кратким описанием (набором ключевиков) в атрибуте title .

Главное:

• древние браузеры не воспринимают тег figure , для них он объявляется через JavaScript;
• новые браузеры добавляют тегу figure CSS-свойства по умолчанию, их я обнуляю.

Разберём CSS трансформацию картинки

В рассматриваемом примере у картинки два состояния :

• figure img — начальное (по умолчанию);
• figure img:hover — при наведении на неё курсора.

CSS-свойство transform

CSS-свойство transform появилось только в CSS3 и задаёт одну или несколько (разделённых пробелом) функций трансформации элемента или none — отмена.

Примечание: для поддержания кроссбраузерности , укажите варианты transform с префиксами: -webkit , -moz , -ms и -o . При желании укажите и свойства -ms-filter (для IE8+) и filter (IE 6 и 7) с заданием матрицы трансформации через progid:DXImageTransform.Microsoft.Matrix() , но этого я разжёвывать не буду.

В приведённом примере использовались две функции трансформации:

• rotate() — задаёт угол поворота элемента относительно точки трансформации. Например: transform: rotate(-3deg) — поворот элемента против часовой стрелки на 3 градуса;
• scale() — задаёт масштаб элемента по горизонтали и вертикали. Например: transform: scale(1.1) — увеличит элемент на 10% .

Задавать transform для начального состояния картинки (figure img) не нужно.

CSS-свойство transition

CSS-свойство transition появилось только в CSS3 и задаёт параметры анимации: CSS-свойство перехода и/или время анимации и/или функцию анимации и/или время задержки перед анимацией .

Примечание: для поддержания кроссбраузерности, укажите варианты transition с префиксами: -webkit , -moz и -o .

В приведённом примере использовались следующие параметры:

• у картинки изменяется CSS-свойство transform (учитывайте префиксы!);
• время (скорость) анимации составляет 0.3s (секунды);
• используется функция анимации ease-out — анимация начинается быстро, к концу замедляется;
• время задержки перед анимацией составляет 0s (секунд), т. е. отсутствует и этот параметр можно не указывать.

Полезные CSS фишки

Для контейнера figure я задаю следующие CSS-свойства:

• background: #ddd — фоновый цвет, так картинка отделяется от контента;
• text-align: center — позиционирование текста по центру (не забываем, картинка — строковый элемент). Заодно и текст в figcaption центрируется;
• margin: 1em -20px — внешний отступ, сверху и снизу как у абзаца (тег p ) — 1em , а слева и справа он «вылазит» за область родительского блока;
• padding: 10px 0 — внутренний отступ, т. е. только сверху и снизу.

Чтобы картинка (при изменении) не вылезала за пределы контейнера figure, задайте контейнеру CSS-свойство: overflow: hidden .

Лажа в том (а куда без неё?), что анимация ест очень много ресурсов. На десктопе — худо-бедно, но допустимо; на мобильных — не рекомендую.

) она как правило изменяет свой вид (становится в фокусе). Чаще всего это простое изменение цвета или добавления подчеркивания. Также изменяется курсор на кисть руки. В этой статье мы рассмотрим подробнее как красиво реализовать изменение стиля ссылки при наведении курсора.

Примеры с изменением вида ссылки при наведении

Пример 1. Как изменить цвет и сделать подчеркивание при наведении

При наведении ссылка станет красной и подчеркнутой: ссылка

Пример 2. Как изменить фон ссылки при наведении

При наведении ссылка изменит фон на синий, а цвет ссылки станет белым: ссылка

Преобразуется на странице в следующее:

Пример 3. Как поменять курсор при наведении на ссылку

По умолчанию у ссылок курсор при наведении имеет значение cursor :pointer . В следующем примере мы изменим его на другой.

При наведении ссылка станет красной и подчеркнутой, а курсор станет в виде плюса: ссылка

Преобразуется на странице в следующее:

Пример 4. Сглаженное изменение стилей ссылки

С помощью свойства transition мы сгладим скорость изменения фона и цвета ссылки.

При наведении ссылка изменит фон на синий, а цвет ссылки станет белым, при этом все это будет сглажено: ссылка

Преобразуется на странице в следующее:

Пример 5. Красивое подчеркивание ссылки

При наведении ссылка изменит цвет и появится необычное подчеркивание: ссылка

Преобразуется на странице в следующее.

Прежде чем разбираться с кнопками, рассмотрим общие для всех них установки.

HTML

Для кнопок будет использоваться очень простой HTML код:

Подписаться

CSS

Также все кнопки будут иметь общие установки для текста надписи и отмену выделения ссылок:

ButtonText { font: 18px/1.5 Helvetica, Arial, sans-serif; color: #fff; } a { color: #fff; text-decoration: none; }

Обычно, пользователь ожидает достаточно мягкого эффекта при навдении курсора мыши на ссылку или кнопку. А в нашем случае кнопка меняет размер - она увеличивается, показывая дополнительное сообщение.

Основной код CSS

Для начала нам нужно только задать кнопке форму и цвет. Определяем высоту 28px и ширину 115px, добавляем поля и отступы, а также задаем кнопке светлую рамку.

#button1 { background: #6292c2; border: 2px solid #eee; height: 28px; width: 115px; margin: 50px 0 0 50px; padding: 0 0 0 7px; overflow: hidden; display: block; }

Эффекты CSS3

Некоторым людям нравится, когда простая кнопка сопровождается достаточно большим кодом CSS. В данном разделе приводятся дополнительные стили CSS3 для нашей кнопки. Вполне можно обойтись и без них, но они придают кнопке более современный вид.

Округляем углы рамки и добавляем градиент. Здесь используется небольшой трюк с темным градиентом, который взаимодействует с любым цветом фона.

/*Скругленные углы*/ -webkit-border-radius: 15px; -moz-border-radius: 15px; border-radius: 15px; /*Градиент*/ background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2)); background-image: -moz-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2)); background-image: -o-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2)); background-image: -ms-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2)); background-image: linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));

Анимация CSS

Теперь установим переход CSS. Анимация будет использоваться для любых изменений свойств и длиться полсекунды.

Наведение курсора мыши

Осталось только добавить стиль для расширения кнопки при наведении курсора мыши на нее. Кнопка должна иметь ширину 230px для отображения всего сообщения.

#button1:hover { width: 230px; }

Простое изменение тональности цвета

Очень простой и популярный эффект CSS для кнопки. При наведении курсора мыши плавно меняется тональность фонового цвета.

Основной код CSS

Код CSS очень похож на предыдущий пример. Используется другой цвет фона и немного изменена форма. Также центрируется текст и установлена высота строки для кнопки, чтобы происходило вертикальное центрирование.

#button2 { background: #d11717; border: 2px solid #eee; height: 38px; width: 125px; margin: 50px 0 0 50px; overflow: hidden; display: block; text-align: center; line-height: 38px; }

Эффекты CSS3

Устанавливаем скругление углов, градиент для фона и дополнительную тень. С помощью rgba делаем тень черной и прозрачной.

/*Скругленные углы*/ -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; /*Градиент*/ background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2)); background-image: -moz-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2)); background-image: -o-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2)); background-image: -ms-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2)); background-image: linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2)); /*Тень*/ -webkit-box-shadow: 0px 3px 1px rgba(0, 0, 0, 0.2); -moz-box-shadow: 0px 3px 1px rgba(0, 0, 0, 0.2); box-shadow: 0px 3px 1px rgba(0, 0, 0, 0.2);

Анимация CSS

Анимация практически не отличается от предыдущего примера.

/*Переход*/ -webkit-transition: All 0.5s ease; -moz-transition: All 0.5s ease; -o-transition: All 0.5s ease; -ms-transition: All 0.5s ease; transition: All 0.5s ease;

Наведение курсора мыши

При наведении курсора мыши будет устанавливаться другой цвет фона. Попробуйте выбрать более светлый вариант цвета в Photoshop, чтобы получился отличный эффект.

#button2:hover { background-color: #ff3434; }

Данный эффект может получиться весьма впечатляющим в зависимости от выбора фонового изображения. В демонстрации используется невзрачный фон и эффект выглядит невзрачно. Попробуйте использовать другую картинку и может получиться ошеломляющий эффект.

Основной код CSS

Основная часть кода не отличается от предыдущих примеров. Обратите внимание на то, что мы используем фоновое изображение. Начальное положение фона установлено в "0 0". При наведении курсора положение сдвигается по вертикали.

#button3 { background: #d11717 url("bkg-1.jpg"); background-position: 0 0; text-shadow: 0px 2px 0px rgba(0, 0, 0, 0.3); font-size: 22px; height: 58px; width: 155px; margin: 50px 0 0 50px; overflow: hidden; display: block; text-align: center; line-height: 58px; }

Эффекты CSS3

В данном примере нет ничего особенного - скругленные углы и тени.

/*Скругленные углы*/ -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; /*Тень*/ -webkit-box-shadow: 0px 3px 1px rgba(0, 0, 0, 0.2); -moz-box-shadow: 0px 3px 1px rgba(0, 0, 0, 0.2); box-shadow: 0px 3px 1px rgba(0, 0, 0, 0.2);

Анимация CSS

Анимация для данного случая длится дольше, чтобы создать плавный и интересный эффект.

/*Переход*/ -webkit-transition: All 0.8s ease; -moz-transition: All 0.8s ease; -o-transition: All 0.8s ease; -ms-transition: All 0.8s ease; transition: All 0.8s ease;

Наведение курсора мыши

Теперь пришла пора сдвигать фоновое изображение. Начальное положение было "0 0". Устанавливаем второй параметр в значение 150px. Для сдвига по горизонтали требуется изменить первый параметр.

#button3:hover { background-position: 0px 150px; }

3D имитация нажатия кнопки

Последний пример в нашем уроке посвящен популярному методу 3D имитации нажатия кнопки при наведении на нее курсора мыши. Анимация для данного случая настолько проста, что даже не требуется задавать переход CSS. Но конечный результат получается вполне впечатляющим.

Основной код CSS

Код CSS для нашей кнопки.

#button4 { background: #5c5c5c; text-shadow: 0px 2px 0px rgba(0, 0, 0, 0.3); font-size: 22px; height: 58px; width: 155px; margin: 50px 0 0 50px; overflow: hidden; display: block; text-align: center; line-height: 58px; }

Эффекты CSS3

В данном случае CSS3 перестает быть приятным опционом. Для получения эффекта требуются тени и градиент. Резкая тень создает видимость 3D кнопки.

/*Скругленные углы*/ -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; /*Тень*/ -webkit-box-shadow: 0px 6px 0px rgba(0, 0, 0, 0.8); -moz-box-shadow: 0px 6px 0px rgba(0, 0, 0, 0.8); box-shadow: 0px 6px 0px rgba(0, 0, 0, 0.8); /*Градиент*/ background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2)); background-image: -moz-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2)); background-image: -o-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2)); background-image: -ms-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2)); background-image: linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));

Наведение курсора мыши

В данном случае мы имеем самую большую секцию hover . Длина тени уменьшается, и с помощью полей создается смешение темной зоны. Все вместе создает иллюзию нажатия кнопки. Переворот градиента усиливает эффект.

#button4:hover { margin-top: 52px; /*Тень*/ -webkit-box-shadow: 0px 4px 0px rgba(0, 0, 0, 0.8); -moz-box-shadow: 0px 4px 0px rgba(0, 0, 0, 0.8); box-shadow: 0px 4px 0px rgba(0, 0, 0, 0.8); /*Градиент*/ background-image: -webkit-linear-gradient(bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.4)); background-image: -moz-linear-gradient(bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.4)); background-image: -o-linear-gradient(bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.4)); background-image: -ms-linear-gradient(bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.4)); background-image: linear-gradient(bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.4)); }

Задача

Решение

Псевдокласс :hover , который добавляется к селектору A , определяет состояние ссылки при наведённом на неё курсоре мыши. В стилях вначале указывается селектор A , потом :hover (пример 1).

HTML5 CSS 2.1 IE Cr Op Sa Fx

Cras ingens iterabimus aequor - завтра снова мы выйдем в огромное море.

В данном примере ссылка становится подчёркнутой и меняет свой цвет, когда на неё наводится указатель (рис. 1). Заметьте, что псевдокласс :hover в коде идёт после :visited . Это имеет значение, иначе посещённые ссылки в данном случае не будут изменять свой цвет.

Аналогично можно изменить и цвет фона под ссылкой при её наведении, добавив свойство background к селектору A:hover , как показано в примере 2.

HTML5 CSS 2.1 IE Cr Op Sa Fx

Audaces fortuna juvat - счастье покровительствует смелым.

Результат данного примера показан на рис. 2. Чтобы текст плотно не прилегал к фону, к селектору A добавлено свойство padding .