Мы принимаем к оплате:

«Подарочный сертификат» от нашего Учебного Центра – это лучший подарок для тех, кто Вам дорог! Оплате обучение и подарите Вашим родным и близким обучение по любому из курсов!!!

«Сертификат на повторное обучение» дает возможность повторно пройти обучение в нашем Учебном Центре со скидкой 1000 рублей!

А также:

Hover в css что это

Псевдокласс hover

Ученикам: я ухожу на каникулы с 21-го декабря по 8 января. Буду не онлайн, хотя иногда возможно буду появляться.

Псевдокласс hover задает стили для ссылки, на которую мы навели мышкой. Обычно этот псевдокласс применяется совместно с псевдоклассами link, visited и active.

Порядок их перечисления в CSS при имеет значение: link, visited, hover, active (если его нарушить - будут проблемы!). Мнемоническое правило для запоминания порядка: LoVe HAte.

Совет: состояние hover можно задавать не только ссылкам, но и любым другим элементам (не работало в старых IE).

Совет: часто состояния link и visited объединяют вместе: a:link, a:visited{color: red}.

Совет: для добавления или отмены подчеркивания ссылок следует использовать свойство text-decoration.

Синтаксис

Примеры

Пример

Непосещенная ссылка будет красного цвета, посещенная - голубого. Если вы наведете на нее мышкой - она станет зеленого цвета, а если нажмете левую кнопку мыши и будете ее удерживать - станет черной (состояние active):

a:link { color: red; } a:visited { color: blue; } a:hover { color: green; } a:active { color: black; }

Результат выполнения кода:

CSS hover эффекты — для картинок, кнопок, при наведении на ссылки, блоки и др.

Очень часто на сайтах вы могли встречать изменение оформления ссылок или кнопок при наведении. Реализовать задачу позволяет специальный псевдокласс :hover в CSS. Сегодня рассмотрим некоторые приемы верстки позволяющие сделать эту фишку, а ниже опубликуем список наиболее интересных из них (с краткими описаниями/пояснениеми). Все варианты разделим на:

Данные группы весьма условны, т.к. многие примеры пересекаются и являются универсальными, то есть могут встречаться при оформлении разных объектов.

Hover эффект в CSS стилях добавляется справа от элемента следующим образом:

a:hover { color: red; }

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

button:hover { background: rgba(0,0,0,0); color: red; } .my-picture:hover { opacity: 0.5; filter: alpha(opacity=50); }

Современные браузеры одинаково корректно воспринимают CSS hover эффект при наведении, хотя в старых версиях IE 6 и ниже он срабатывает исключительно для линков. Плюс в некоторых источниках говорилось, что этому браузеру обязательно нужно указывать в коде .

Кстати, при задании стилей ссылок также дополнительно могут использоваться селекторы :link — для не посещенных еще страниц, :visited — тех, где вы уже были + :active определяет активный сейчас адрес. Важно размещать hover эффект в CSS после :link и :visited, если они существуют.

Перейдем от теории к практике. Ниже представлен список полезных материалов и сниппетов — переходите по ссылкам дабы просмотреть исходники.

Hover эффекты кнопок и ссылок

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

Простые примеры для кнопок

В данной статье приведены 8 базовых способов как можно оригинальным образом обыграть динамические hover эффект при наведении: добавление иконки, создания прозрачного фона, 3D преобразование, наклон и т.п. Все коды достаточно простые, вот один из них:

Необычный градиентный в кнопке

Здесь при наведении появляется яркий цветной градиент, который следует за передвижением курсора. В реализации используются CSS переменные, а также скрипт определения позиции мышки. Результат выглядит это достаточно оригинально. Описание метода ищите тут.

Sullivan Buttons

Фишка в том, что при наведении на разные кнопки кроме изменения цвета фона запускается также небольшая анимация с иконками (причем у каждой своя).

CSS Icons on Hover

Подборка из 5ти простых вариантов реализации задачи. Во всех случаях задействованы дополнительные иконки, которые появляются справа/слева от текста либо заменяют его.

Button Hover Effects

По сравнению с прошлым примером эти 12 функций срабатывания выглядят куда интереснее: как визуально, так и в плане кода. Не обошлось без JS.

Nav Hovers

Несколько фишек, которые позволяют сделать более необычные подчеркивания ссылок на CSS нежели с базовым свойством text-decoration. Фон кнопки дополнительно заполняется разными визуальными эффектами.

Info on Hover

Функциональность всплывающих подсказок сейчас поддерживается во всех браузерах, но вы можете доработать ее под свои нужды. В текущем примере срабатывание псевдокласса происходит для тега dfn, смотрится стильно. Код достаточно компактный HTML + CSS.

Mana Button

Один из самых оригинальных вариантов hover эффекта в блоках — при наведении выполняется словно заполнение его жидкостью. В реализации используется CSS, HTML и SVG. В определенной тематике сайтов данный сниппет однозначно будет находкой.

Hover эффекты для изображений

15 базовых приемов

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

Красивые hover эффекты изображений

Подборка из 30 приятных и плавных действий при наведении на картинку. За счет простых визуальных манипуляций в виде зума, добавления линий создается хороший комплексное впечатление. Местами увеличивается заголовок и «подтягивается» краткое описание. Отличный вариант для портфолио.

Barberpole Hover Animation

Не сложная на первый взгляд анимация, которая в итоге смотрится очень классно и нестандартно.

CSS hover эффекты с определением направления

Отличная подборка сниппетов и кодов по теме находится в статье с css-tricks.com. Все эти примеры объединяет тот факт, что в процессе работы определяется местоположение и направление движения курсора. Это, в свою очередь, позволяет создавать достаточно оригинальные реакции при наведении на элементы страницы:

Во многих сложных решениях Javascript и jQuery для hover эффектов позволяют значительно разнообразить и улучшить результат.

Direction Aware Hover Goodness

Direction Aware Tiles using clip-path Pure CSS

Остальные фишки ищите в оригинальной статье.

Animatism

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

Caption Hover Effects

По ссылке находится 7 CSS3 hover эффектов заголовков — когда при наведении на изображение, пользователь увидит информационный блок с тайтлом, кратким описанием и ссылкой для перехода. Нельзя сказать, что примеры очень оригинальные, но они однозначно помогут разнообразить статичный контентный проект.

CSS Hover библиотеки

Hover.css

Проект под незамысловатым названием Hover.css содержит коллекцию CSS3 эффектов для ссылок, кнопок, блоков и т.п. Можете использовать готовый код и/или добавлять в него свои модификации. Здесь много интересного: 2D/3D преобразования, работа с фоном и рамками, тени, иконки. Решение доступно в CSS, LESS и Sass форматах.

Imagehover.css

Еще одна библиотека задающая hover эффекты картинкам — в бесплатной версии найдете 44 варианта преобразований (премиальный набор содержит их в 5 раз больше). Тут также поддерживаются LESS и SCSS, весит это дело лишь 19кб. На сайте имеется страница с демонстрацией всех работающих примеров. Предлагается много уникальных фишек, которые не встречались выше.

iHover

В проекте iHover более 30 разных приемов для круглых и квадратных по формату объектов. Все они достаточно оригинальные, простых «одноэлементных» действий в виде обычного зума/вылетания практически нет. Реализована задача на чистом CSS3 + HTML (плюс Scss файлы включены). Отличная совместимость с Bootstrap 3, есть документация.

Итого. Надеемся эти css hover эффекты при наведении на картинки, блоки, ссылки и другие элементы страницы помогли вам разобраться в данной теме. Самые удачные, на ваш, взгляд решения можете внедрить в своих сайтах — будь то подключение полноценной библиотеки или просто интеграция небольшого варианта кода.

Если знаете еще какие-то интересные фишки и сниппеты, присылайте URL’ы на них в комментариях. И мы в будущем дополним статью.

33 hover-эффекта на CSS3, JS и jQuery, о которых следует знать каждому

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

1. 10 Stylish Hover Effects

Как уже понятно из заголовка, здесь вы найдете коллекцию, состоящую из 10 невероятно стильных CSS эффектов:

2. Direction-aware Hover Effect

Этот невероятный CSS3-эффект поможет вам добиться уникального результата. При наведении курсора на элементы страницы эффект начинает следовать за указателем, создавая невероятный трехмерный эффект:

3. Wacom Hover Effect

Несмотря на то, что этот эффект можно по праву считать самым распространенным, он по-прежнему способен привлекать внимание:

4. CSS3 Hover Effects

Если вам нужны круговые эффекты на CSS3-коде, то вы попали в нужное место! Здесь их целых 12 штук!

5. Hover Animation from UNIQLO

Еще один интересный CSS эффект при наведении курсора, который позволит создать невероятно привлекательные миниатюры или украсить любые изображения:

6. Button Hover Effects

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

7. 10 Stunning Hover Effects

Еще один набор, состоящий из 10 различных CSS3-эффектов. Большинство из них очень впечатляющие:

8. CSS3 Hover Effects 2

Данная коллекция включает в себя четыре различных эффекта при наведении на картинку CSS. Каждый эффект раскрывает заголовок и описание:

9. Bounce on Hover

Забавный и интересный эффект при наведении курсора на изображения. Он хорошо подойдет для раздела отзывов или списка сотрудников с их фотографиями:

10. 8-bit Hovers

Эффект, выполненный в винтажном стиле, который точно напомнит вам о прошлом!

11. Simple Title Hover Effect

Несмотря на название, это непросто эффект. Он показывает заголовки и слегка изменяет уровень прозрачности при наведении курсора:

12. Flip Down Effect

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

13. Curiosity Award

Пока не наведете курсор на картинку, не поймете всей красоты эффекта. Бессистемные линии моментально выстраиваются в логотип, который тут же оформляется цветом:

14. Image Hover Effect

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

15. Hover Animation

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

16. Hover Me Brother

Возможно, это не самый практичный эффект, однако он точно забавный! Наведите курсор на солнцезащитные очки, и начнется магия!

17. Nautilus SCSS HAML Hover Effects

Вам обязательно стоит опробовать каждый из них, так как все они помогут сделать изображения уникальными!

18. SVG Border Hover Effect 1

Этот уникальный hover CSS эффект отлично подойдет для текста, кнопок или картинок:

19. Hover Search Map Icon

Не знаете, как украсить иконки поиска или карты? Тогда это решение для вас! Плавные трансформации будут приятны любому глазу:

20. Social Icon Pane

Эффект отлично подойдет для скрытия кнопок социальных сетей, которые будут отображаться лишь при наведении курсора:

21. Product Item Additions Info

Этот CSS эффект поможет привлекательным образом отобразить дополнительную информацию о товарах в интернет-магазине:

22. Animated Envelope

Идеальный эффект при наведении для раздела контактов. Этот анимированный конверт отображает контактную информацию на развороте. Но происходит это только после наведения курсора:

23. Back to Top

Уникальный эффект при наведении, который позволяет заменить традиционную кнопку “Вверх” на анимированную:

24. Fancy Hover

Здесь представлено сразу два эффекта. Кроме увеличения картинки эффект также изменяет область отображения при наведении курсора на изображение:

25. Reminders Icon Hover Effect

Этот CSS эффект для сайта был разработан под вдохновением от видео, посвященного OS X Yosemite:

26. Circle Image Hover

Еще один круглый эффект, применимый к круговым изображениям. Здесь представлено четыре различных hover-стиля:

27. Safari Icon Hover Effect

Этот эффект представляет собой воссоздание анимации иконки браузера Safari. Можно без труда заменить иконку собственной картинкой или логотипом:

28. Simple Button Hover

Этот простой CSS эффект можно применить как к кнопкам, так и к картинкам. Небольшое количество подсветки позволит представить картинки на странице в лучшем свете:

29. 3D Photo Fold Effect

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

30. 3D Thumb Image Hover Effect

Интересный эффект, который можно применить к изображениям на сайте. Он как бы разглаживает изображение при наведении курсора:

31. Background Change CSS

Этот интересный CSS эффект при наведении позволяет изменять фон при наведении курсора на кнопку:

32. Direction Aware Hover

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

33. SVG Hover Animation

Эти красивые hover CSS эффекты устроены довольно интересно. Настоящая анимация и масштабируемые SVG-картинки позволяют использовать подобные эффекты на сайтах любого типа:

В завершение

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

Перевод статьи “30+ CSS3 Hover Effects You should be Familiar With” был подготовлен дружной командой проекта Сайтостроение от А до Я.

Состояния ссылок: link, visited, hover, active — учебник CSS

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

Какими бывают состояния ссылок

Взаимодействия пользователя с элементами веб-страницы отслеживаются браузером. Если говорить о ссылках, им присваивается определенный статус в зависимости от того, какое действие было совершено (наведение, нажатие, переход по ссылке и т. д.). Это мы и называем состояниями ссылок.

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

:hover — ссылка, на которую наведен курсор;
:active — активная ссылка (та, по которой совершается клик, или на которой удерживается кнопка мыши);
:link — ссылка, еще не посещенная пользователем;
:visited — посещенная ссылка.

Для справки: из соображений безопасности набор стилей, которые можно использовать для ссылок :visited, ограничен. Посещенные ссылки принимают только свойства color, background-color, border-color (и его производные), column-rule-color, outline-color. При этом свойство к посещенной ссылке можно применить, только если это же свойство задано и для обычной. Прозрачность цвета, установленная через альфа-канал для элемента :visited, будет проигнорирована. JavaScript-метод getComputedStyle всегда возвращает значение цвета непосещенных ссылок, даже если у посещенных ссылок цвет иной.

Стилизация состояний

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

a { color: red; } /* обычный цвет ссылки */ a:hover { color: blue; } /* цвет ссылки, на которую наведен курсор */

Псевдокласс :active также поддается гибкой стилизации:

a:active { background-color: yellow; } /* цвет фона ссылки в момент нажатия на нее */

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

a:link { color: red; } a:visited { color: grey; } a:hover { color: blue; } a:active { background-color: yellow; }

Что будет, если поменять строки местами? В этом случае некоторые стили перестанут работать согласно правилам каскадности. Дело в том, что ссылка может находиться одновременно в двух состояниях, к примеру, в :visited и в :hover, и если расположить стиль для :hover выше, чем стиль для :visited, то первый перекроется.

Выбор ссылок с помощью селекторов

Как записать селектор с псевдоклассом для определенной группы ссылок? Например, если вам нужно применить какой-то стиль для всех ссылок навигационного меню с идентификатором #main-menu, когда такая ссылка находится в состоянии наведенного на нее курсора, вы можете использовать такой селектор:

#main-menu a:hover {background-color: #a38beb;}

Либо, если у каждой ссылки этого меню дополнительно имеется свой класс (допустим, это .menu-link), то такая запись тоже подойдет:

#main-menu a.menu-link:hover {background-color: #a38beb;} #main-menu .menu-link:hover {background-color: #a38beb;} /* так тоже сработает */

Чтобы определить стили для всех состояний данных ссылок, запишите для каждого псевдокласса отдельное правило:

#main-menu .menu-link:link { color: red; } #main-menu .menu-link:visited { color: grey; } #main-menu .menu-link:hover { background-color: #a38beb; } #main-menu .menu-link:active { background-color: yellow; }

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