Как сделать изменение цвета при наведении css
Добавил пользователь Алексей Ф. Обновлено: 04.10.2024
Давайте создадим чистый CSS-эффект, который меняет цвет текстовой ссылки при наведении… но вставьте этот новый цвет вместо простой замены цветов.
Для этого мы можем использовать четыре различных метода. Давайте посмотрим на них, помня о важных вещах, таких как доступность, производительность и поддержка браузера.
Техника 1: Использование background-clip: text
На момент написания статьи background-clip: text это экспериментальная функция, которая не поддерживается в Internet Explorer 11 и ниже.
Этот метод включает создание нокаутирующего текста с жестким градиентом остановки. Разметка состоит из одного HTML элемента a для создания гиперссылки:
Мы можем начать добавлять стили к гиперссылке. Использование overflow: hidden обрезает любой контент за пределами гиперссылки во время перехода при наведении:
Нам нужно будет использовать линейный градиент с жесткой остановкой на 50% от начального цвета, которым мы хотим, чтобы была ссылка, а также от цвета, на который она изменится:
Давайте использовать background-clip , чтобы обрезать градиент и значение text для отображения текста. Мы также будем использовать свойства background-size и background-position :
Наконец, давайте добавим свойство transition псевдоклассу :hover у ссылки. Чтобы ссылка заполнялась слева направо при наведении, используйте свойство background-position :
Несмотря на то, что эта техника обеспечивает эффект наведения, Safari и Chrome будут обрезать текстовые декорации и тени, то есть они не будут отображаться. Применение стилей текста, таких как подчеркивание, со свойством CSS text-decoration не будет работать.
Техника 2: Использование ширины / высоты
Это работает с использованием data атрибута, содержащего тот же текст, что и тег a , и установки width (заполнение текста слева направо или справа налево) или height (заполнение текста сверху вниз или снизу вверх), от 0% до 100% при наведении.
CSS похож на предыдущую технику минус свойства CSS фона. Свойство text-decoration будет работать здесь:
Это когда нам нужно использовать контент из атрибута data-content . Он будет расположен над содержимым в теге a . Мы используем небольшой прием для копирования текста в атрибуте data и отображения его через функцию attr() в свойстве content псевдоэлемента ::before .
Чтобы текст не переносился на следующую строку, будет применяться white-space: nowrap . Чтобы изменить цвет заливки ссылки, задайте значение для свойства CSS color , используя псевдоэлемент ::before и width начинающийся с 0:
Увеличьте ширину псевдоэлемента ::before до 100%, чтобы завершить эффект текста при наведении:
Использование CSS свойства text-decoration может позволить различным стилям подчеркивания появляться при переходе CSS:
Техника 3: Использование clip-path
Для этой техники мы будем использовать CSS свойство clip-path с многоугольной формой. Многоугольник будет иметь четыре вершины, две из которых будут расширяться вправо при наведении:
Разметка такая же, как и в предыдущем методе. Мы снова будем использовать псевдоэлемент ::before , но CSS будет другим:
В отличие от предыдущих методов, text-decoration: underline должен быть объявлен псевдоэлементу ::before для заполнения подчеркивания при наведении курсора.
Теперь давайте рассмотрим CSS для техники clip-path :
Вершины полигона свойства clip-path устанавливаются в процентах, чтобы определить координаты в следующем порядке:
- 0 0 = вверху слева
- 0 0 = вверху справа
- 100% 0 = внизу справа
- 0 100% = внизу слева
Направление эффекта заполнения можно изменить, изменив координаты. Теперь, когда у нас есть представление о координатах, мы можем заставить многоугольник расширяться вправо при наведении:
Этот метод работает довольно хорошо, но обратите внимание, что поддержка свойства clip-path варьируется в зависимости от браузера. Создание CSS-перехода с помощью clip-path - лучшая альтернатива, чем использование метода width / height .
Техника 4: Использование преобразования
Разметка для этого метода использует метод маскировки с элементом span . Поскольку мы будем использовать дублированный контент в отдельном элементе, мы будем использовать aria-hidden="true" для улучшения доступности - это скроет его от программ чтения с экрана, чтобы контент не читался дважды:
CSS для элемента span содержит переход, который будет начинаться слева:
Далее нам нужно заставить скользить span вправо вот так:
Для этого мы будем использовать CSS функцию translateX() и установим ее в 0:
Затем мы будем использовать псевдоэлемент ::before для span , снова используя атрибут data-content , который мы делали ранее. Мы установим позицию, переместив ее на 100% вдоль оси x.
Как и для элемента span , положение псевдоэлемента ::before также будет установлено на translateX(0) :
Несмотря на то, что этот метод является наиболее совместимым с кросс-браузерными технологиями, для его получения требуется больше разметки и CSS. Тем не менее, использование CSS-свойства transform очень полезно для производительности, поскольку не вызывает перерисовок и, следовательно, обеспечивает плавные переходы CSS со скоростью 60 кадров в секунду.
В заключение!
Мы только что рассмотрели четыре различных метода для достижения одинакового эффекта. Хотя у каждого есть свои плюсы и минусы, вы можете заметить, что можно полностью изменить цвет текста. Это аккуратный небольшой эффект, который делает ссылки более интерактивными.
Подскажите, как с помощью CSS, при наведении курсора, заменить цвет PNG-иконки (например, такой: ) с серого на красный.
3 ответа 3
В CSS3 это возможно с помощью свойства filter :
Цепочка фильтров такова (порядок важен!):
- sepia - по сути, делает изображение монохромным с рыжим оттенком;
- hue-rotate - вращение цветового круга до нужного оттенка;
- saturate - насыщенность цвета.
Чтобы какой-либо цвет превратить в белый:
Здесь цепочка следующая:
- grayscale - обесцвечиваем изображение;
- brightness - устанавливаем яркость с заведомо завышенным значением.
Подготовьте отдельный спрайт с иконками разных цветов (как показано ниже). В CSS-стилях зафиксируйте размеры блока. Задайте для блока фоновое изображение. У псевдокласса :hover пропишите смещение этого изображения равное высоте (или ширине) картинки. В результате получится элемент, который чуть-чуть изменяется при наведении указателя мыши.
Всё ещё ищете ответ? Посмотрите другие вопросы с метками html css hover png или задайте свой вопрос.
Связанные
Похожие
Для подписки на ленту скопируйте и вставьте эту ссылку в вашу программу для чтения RSS.
дизайн сайта / логотип © 2022 Stack Exchange Inc; материалы пользователей предоставляются на условиях лицензии cc by-sa. rev 2022.1.21.41235
Сегодня перед нами стоит задача изменения цвета элемента, когда на него наводиться курсор мыши.
Рассмотрим решение нашей задаче на примере ссылки. Допустим, для ее текста установлен определенный цвет – это делается с помощью свойства color. Чтобы объект реагировал на наведение курсора, необходимо к этому объекту добавить псевдокласс :hover. Таким образом мы добьемся изменения цвета, но оно будет происходить мгновенно. Чтобы управлять временем изменения, необходимо обратиться к свойству transition. Через него можно будет установить время изменения цвета в миллисекундах или в секундах.
В коде указана синяя ссылка, которая в момент наведения курсора мыши будет плавно менять свой цвет на красный.
CSS3 открывает неограниченные возможности перед UI-дизайнерами, и главный плюс состоит в том, что практически любую идею можно легко реализовать и воплотить в жизнь, не прибегая к использованию JavaScript.
Удивительно, как простые вещи могут оживить обычную веб-страницу, сделать ее более доступной для восприятия пользователями. Речь идет о CSS3 переходах, с помощью которых можно позволять элементу трансформироваться и изменять стиль, например, при наведении курсора. Девять примеров CSS3 анимации, которые доступны ниже, помогут создать на сайте атмосферу отзывчивости, а также улучшить общий вид страницы благодаря красивым плавным переходам.
Для более детального ознакомления вы можете скачать архив с файлами.
1. Изменение цвета при наведении курсора
Когда-то реализация такого эффекта была довольно кропотливой работой, с математическими вычислениями определенных значений RGB. Сейчас же достаточно записать стиль CSS, в котором необходимо добавить к селектору псевдокласс :hover и задать фоновый цвет, который плавно (за 0,3 секунды) заменит собой исходный цвет фона при наведении курсора на блок:
2. Появление рамки
Интересная и яркая трансформация — внутренняя рамка, плавно появляющаяся при наведении мыши. Хорошо подойдет для украшения различных кнопок. Чтобы добиться такого эффекта, используем псевдокласс :hover и свойство box-shadow с параметром inset (задает тень внутри элемента). Кроме этого, потребуется задать растяжение тени (в нашем случае это 23px ) и её цвет:
3. Свинг
Данная CSS анимация — исключение, т. к. здесь свойство transition не используется. Вместо него мы задействовали:
- @keyframes — базовую директиву для создания покадровой CSS-анимации, которая позволяет делать т. н. раскадровку и описывать анимацию в виде списка ключевых моментов;
- animation и animation-iteration-count — свойства для задания параметров анимации (длительность и скорость) и количества циклов (повторов). В нашем случае повтор 1.
4. Затухание
Эффект плавного затухания — это, по сути, обычное изменение прозрачности элемента. Анимация создается в два этапа: сначала необходимо установить первоначальное состояние прозрачности 1 — то есть полная непрозрачность, после чего указать её значение при наведении мыши — 0.6 :
Для противоположного результата поменяйте значения местами:
5. Увеличение
Чтобы при наведении курсора блок увеличивался, мы воспользуемся свойством transform и зададим ему значение scale(1.2) . При этом блок увеличится на 20 процентов с сохранением своих пропорций:
6. Уменьшение
Уменьшить элемент так же просто, как и увеличить. Если в пятом пункте для увеличения масштаба нам необходимо было указать значение больше, чем 1, то для уменьшения блока мы просто укажем значение, которое будет меньше единицы, например, scale(0.7) . Теперь при наведении мыши блок будет пропорционально уменьшаться на 30 процентов от своего первоначального размера:
7. Трансформация в круг
Одна из часто используемых анимаций — прямоугольный элемент, который при наведении курсора преобразовывается в окружность. С помощью свойства CSS border-radius , использованного в паре с :hover и transition , это можно реализовать без проблем:
8. Вращение
Забавный вариант анимации — поворот элемента на определенное количество градусов. Для этого нам снова понадобится свойство transform , но уже с другим значением — rotateZ(20deg) . При таких параметрах блок будет повернут на 20 градусов по часовой стрелке относительно оси Z:
9. 3D тень
Мнения дизайнеров расходятся в том, уместен ли данный эффект во флэт-дизайне. Тем не менее, эта CSS3 анимация является весьма оригинальной и также используется на веб-страницах. Добиваться трехмерного эффекта будем с помощью уже знакомых нам свойств box-shadow (создаст многослойную тень) и transform с параметром translateX(-7px) (обеспечит сдвиг блока по горизонтали влево на 7 пикселей):
Поддержка браузерами
На сегодняшний день свойство transition поддерживается следующими браузерами:
| Десктопные браузеры | |
|---|---|
| Internet Explorer | Поддерживается версией IE 10 и выше |
| Chrome | Поддерживается с версии 26 (до версии 25 работает с префиксом -webkit- ) |
| Firefox | Поддерживается с версии 16 (в версиях 4-15 работает с префиксом -moz- ) |
| Opera | Поддерживается с версии 12.1 |
| Safari | Поддерживается с версии 6.1 (в версиях 3.1-6 работает с префиксом -webkit- ) |
| Мобильные браузеры | |
|---|---|
| iOS Safari & Chrome | Поддерживается с версии 7.0 (в версиях 3.2-6.1 работает с префиксом -webkit- ) |
| Opera Mobile | Поддерживается с версии 12.1 |
| Android Browser | Поддерживается с версии 4.4 (в версиях 2.1-4.3 работает с префиксом -webkit- ) |
| Chrome/Firefox для Android | Поддерживается с версии 47/44 |
| Internet Explorer Mobile | Поддерживается версией IE Mobile 10 и выше |
| UC Browser для Android | Поддерживается с префиксом -webkit- |
Остальные свойства, использованные в данных примерах, такие как transform , box-shadow и т. д., также поддерживаются почти всеми современными браузерами. Однако, если вы собираетесь использовать эти идеи для своих проектов, настоятельно рекомендуем перепроверять кроссбраузерность.
Надеемся, что эти примеры CSS3 анимации были полезными для вас. Желаем творческих успехов!
Почему этот способ простой? Потому что он делается только с помощью CSS. Никаких скриптов только стили.
В общем, дорогие друзья, давайте приступать.
Посмотреть пример
Плавное изменение цвета при наведении
Для всех ссылок
Друзья, для того чтобы этот эффект работал на всех ссылках на сайте, тогда просто нужно в Вашем CSS файле к классу а(ссылки) добавить тег transition. Желательно с префиксами для разных браузеров, это такая страховка. В общем вот как всё должно выглядеть:
По умолчанию здесь стоит 0,2 секунды при наведении курсора и 0.02 секунды после убирания. Другими словами здесь выставляется скорость анимации. Это значение Вы можете изменять как угодно, они стоят в примере.
Для одной ссылки на странице (или разные цвета)
Чтобы этот CSS эффект сделать для одной ссылки на сайте, нужно задать отдельный класс к какому либо тегу, например, h1 или li. В данном случае мы будем пресваевать класс к тегу li. Выглядит это следующим образом:
HTML
Здесь мы придумали класс s1
CSS
Всё. Теперь у нас плавность будет работать только на той ссылке где присвоен этот класс s1
Разные цвета ссылок
Для того чтобы сделать ссылки разных цветов при наведении на одной странице, к каждому тегу с ссылкой присваеваем разные классы в стилях. Давайте посмотрим на практике:
HTML
Как видите, что второй тег li уже имеет класс s2.
CSS
Одним словом здесь мы задаём каждой ссылке отдельный цвет при наведении, а потом каждый класс задаём тегу (li) на странице.
Плавное смещение ссылки вправо на странице
Говорю сразу, что данный эффект, скорее всего многим не понравиться, но на практике я его часто замечаю. Мне он нравится и я хочу поделиться им с Вами.
Делается этот плавный сдвиг довольно просто. Всего лишь нужно присвоить к списку на странице тег div с соответствующим классом.
Для начала нам нужен сам html код списка, делать мы его будем с помощью тегов ul и li:
HTML
Как Вы уже заметили, что мы к списку добавили тег
Теперь, чтобы всё заработало в стили нужно добавить следующее:
CSS
По умолчанию (как в примере) скорость анимации стоит 0.1 секунд, а расстояние сдвига в 8px. Естественно эти значения Вы можете изменять, поэкспериментировать, так сказать. :-)
Читайте также: