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

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

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

    . . (подключаются отдельно).

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

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

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

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

Поддержка hover эффектов

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

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

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

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

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

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 эффекта в блоках &#8212; при наведении выполняется словно заполнение его жидкостью. В реализации используется CSS, HTML и SVG. В определенной тематике сайтов данный сниппет однозначно будет находкой.

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

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

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

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

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

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

Barberpole Hover Animation

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

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

Оригинальные CSS hover эффекты

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

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

Direction Aware Hover Goodness

Direction Aware Tiles using clip-path Pure CSS

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

Animatism

Эффекты при наведении - Animatism

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

Caption Hover Effects

Caption Hover Effects

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

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

Hover.css

Библиотека Hover.css

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

Imagehover.css

Библиотека Imagehover.css для изображений

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

iHover

iHover

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

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

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

Подмена цвета PNG при наведении мыши

Подскажите, как с помощью CSS, при наведении курсора, заменить цвет PNG-иконки (например, такой: введите сюда описание изображения ) с серого на красный.

В CSS3 это возможно с помощью свойства filter :

Цепочка фильтров такова (порядок важен!):

  • sepia — по сути, делает изображение монохромным с рыжим оттенком;
  • hue-rotate — вращение цветового круга до нужного оттенка;
  • saturate — насыщенность цвета.

Чтобы какой-либо цвет превратить в белый:

Здесь цепочка следующая:

  • grayscale — обесцвечиваем изображение;
  • brightness — устанавливаем яркость с заведомо завышенным значением.

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

спрайт с вертикально расположенными иконками

&#x412;&#x441;&#x451; &#x435;&#x449;&#x451; &#x438;&#x449;&#x435;&#x442;&#x435; &#x43E;&#x442;&#x432;&#x435;&#x442;? Посмотрите другие вопросы с метками html css hover png или задайте свой вопрос.

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

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

Изменить начертание шрифта при наведении без сдвига соседних элементов

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

В данной статье покажу приём, который позволит исправить такое поведение

Пример некорректного поведения

Посмотрим пример, в котором попытаемся изменить начертание шрифта на bold при наведении

В результате у нас получается следующее:

При наведении соседние элементы смещаются

Посмотрим ниже, как это исправить

Исправляем некорректное поведение

Для исправления данной проблемы, мы будем использовать data атрибуты для ссылок и псевдоэлемент :after со свойством content: attr();

Для каждой ссылки добавим data атрибут data-title с соответствующим ссылке значением

Псевдоэлемент :after , при помощи свойства content: attr(data-title); берёт значение из data атрибута ссылки data-title

Чтобы псевдоэлемент со значением data атрибута располагался точно над элементом ссылки, используем абсолютное позиционирование и display: flex; с соответствующими свойствами для центрирования

Стилизуем псевдоэлемент :after , и назначаем поведение при наведении :hover — при наведении на ссылку текст самой ссылки становится прозрачным, а текст псевдоэлемента заданного цвета

Посмотрим на текущий результат:

Теперь при наведении на элемент, соседние элементы не сдвигаются

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

Итоги

Надеюсь, эта небольшая статья сэкономит вам некоторое время, если вы столкнётесь с такой ситуацией

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

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