Как сделать чтобы при наведении менялся цвет иконки
Обновлено: 05.07.2024
Заменить одну картинку на другую при наведении на неё курсора мыши.
Решение
Смена одной картинки на другую при наведении на неё курсора мыши называется эффектом перекатывания. Обычно для создания эффекта перекатывания применяется JavaScript, но в большинстве случаев вполне достаточно и CSS.
Псевдокласс :hover
Вначале разберём, как делается собственно сам эффект. Для этой цели используется псевдокласс :hover , он добавляется к желаемому селектору. Этот псевдокласс определяет стиль элемента, когда на него наводится курсор мыши, что нам как раз и требуется. Сразу отметим, что в браузере Internet Explorer версии 6 и ниже :hover работает только со ссылками, тогда как другие браузеры понимают :hover и для других элементов. Так что для универсальности придётся помещать изображение внутрь контейнера . Сам рисунок добавляется и меняется с помощью стилевого свойства background . Алгоритм действий следующий.
- Готовятся два изображения одинакового размера, одно для исходного вида, а второе — для его замены при эффекте перекатывания.
- Исходная картинка добавляется в качестве фонового рисунка к селектору A через стилевое свойство background со значением url(URI) , здесь URI — путь к графическому файлу.
- Присоединяем псевдокласс к селектору A и снова включаем свойство background , но в качестве значения указываем замещающее изображение.
- Чтобы ссылка была по размеру картинки, её следует превратить в блочный элемент с помощью свойства display со значением block , а также задать высоту и ширину ссылки.
На рис. 1 приведены два изображения: исходное (рис. 1а) и замещающее (рис. 1б).
а б
Рис. 1. Картинки для создания эффекта перекатывания
Пример 1. Использование псевдокласса :hover
HTML5 CSS 2.1 IE Cr Op Sa Fx
Приведённый способ хотя и прост в реализации, но имеет определённый недостаток. Поскольку второй рисунок загружается только при наведении курсора на ссылку, то отображение картинки происходит с некоторой паузой. Для устранения этой задержки можно использовать не два изображения, а лишь одно.
Эффект перекатывания с одним рисунком
Казалось бы имеется противоречие, ведь эффект перекатывания состоит в замене одного рисунка на другой, как же тогда обойтись одной картинкой? На самом деле изображений будет два (рис. 2), но храниться они будут в одном графическом файле.
Рис. 2. Изображение с двумя картинками
Смена одного рисунка на другой происходит сдвигом изображения по вертикали за счёт использования универсального свойства background или background-position , как показано в примере 2.
Пример 2. Изменение положения рисунка
HTML5 CSS 2.1 IE Cr Op Sa Fx
Для селектора A устанавливается фоновое изображение через свойство background , ширина ( width ) совпадает с рисунком, а высота (свойство height ) равна половине высоты изображения. В итоге первоначально должна отображаться зеленая вкладка целиком.
При наведении на ссылку фон смещается вверх на половину высоты картинки (40 пикселов) с помощью background-position и становится видна оранжевая вкладка.
Заменил на сайте в хедере иконку Flickr на загруженную на сайт свою в ряду коллекции Font Awesome. То же самое сделал и в футере. Только там цвет наведения на месте, а в хедере никак не получается его присвоить. Также интересует как сменить отображаемое при наведении название данной иконки.
спасибо за ответы! оперативно и по делу!
И я так понял это иконки самой темы. По другому сделать немного сложнее.
Ещё можно через настройки темы убрать эти иконки и скачать какой то прикольный плагин с ними.
- Ответ изменён 1 год, 6 месяцев назад пользователем VseProIgru .
Заходите к нам еще, всегда рады помочь -)))
Rupor, привет.
Заменил на сайте в хедере иконку Flickr
Вы её перекрыли, оригинальня также отображается, теперь и со смещением.
Только там цвет наведения на месте, а в хедере никак не получается его присвоить.
Также интересует как сменить отображаемое при наведении название данной иконки.
Сильно зависит от того, чем вообще выводятся эти иконки.
@vladvector, добрый вечер. А как это отображается, если её не видно? Да я понимаю, что с :hover надо, но сам код с этим свойством слепить не получается. Иконки выводятся посредством Font Awesome. Просто иконки сервиса Coub там до сих пор нет, вот и приходится велосипед изобретать
- Ответ изменён 1 год, 6 месяцев назад пользователем Rupor .
Rupor,
А как это отображается, если её не видно?
Я код смотрел. Ну и сам факт того, что старая иконка на месте — не есть хорошо. У вас эти иконки в теме зашиты или отдельно как подключали?
Просто иконки сервиса Coub там до сих пор нет, вот и приходится велосипед изобретать
Её уже 7 лет как не могут добавить)
понимаю, что с :hover надо, но сам код с этим свойством слепить не получается
В чём загвоздка?
Попробуйте так (добавить в дополнительные стили в настройках темы):
width: 20px; и height: 20px; — этот размер иконки соответствует размеру других иконок.
У вас эти иконки в теме зашиты или отдельно как подключали?
новая картинка в оранжевом цвете;
А почему в оранжевом? Она в исходом же должна быть в чёрном
Rupor, так вы хотите же эффект наведения сделать, чтобы цвет менялся, нет? У вас остальные иконки оранжевые при наведении, вот я и предположил, что вы хотите всё в одном решении сделать.
Так-то не принципиально, делайте как захотите.
@vladvector, ок, попробую. Так что сделать, чтоб в коде старого варианта тоже не было и чтоб опять-таки при наведении всплывало название Coub, а не Flickr?
Rupor, самое простое, но не лучшее решение — это скрыть старую иконку через display: none; , а описание можно костылём через JS реализовать.
Но в итоге, как видите, проще было бы свои иконки спрайтом сделать, а про FA забыть в данном случае.
Посмотреть пример
И так, давайте начнём. Для начала нужно создать самые обычные блоки с помощью CSS, которые будут иметь разрешение 500 на 50 пикселей:
Придумываем класс будущему блоку, например Box:
Получиться у нас должно примерно следующее:
Теперь самое интересное. Нам нужно, чтобы при наведении на этот блок курсором он плавно менял на заданный цвет. Делать мы это будем с помощью JQuery.
JQuery
Для начала между тегами и нужно поставить следующее:
Затем опять же между тегами и копируем вот этот скрипт:
Где .Box — это класс блока, который мы придумали выше в CSS.
После того когда Вы всё сделаете как написано выше, цвет блока плавно будет меняться. Чтобы такой блок вставить на страницу, нужно просто добавить следующее в нужное место:
И блок появится.
Посмотреть пример
Важно
Данный плагин может менять только цвет фона (бекграунд). Например к ссылкам или к тексту его прикрепить не получится. Цвет ссылок меняет другой плагин (скоро обязательно напишу как сделать).
Если Вам захочется сделать чтобы блоки на странице были разного цвета, как у меня в примере, Вам нужно будет между тегами и поставить несколько скриптов подряд и соответственно не забыть поменять цвет на желаемый. Самое главное нужно поменять класс, например в нашем примере выше — класс Box, а следующий скрипт должен быть с другим классом, например Box1, затем Box2 и так далее.
Вот и всё, дорогие друзья. Если Вам что либо будет не понятно, обязательно спрашивайте в комментариях. До скорых встреч.
Первый способ. Картинка должна быть inline SVG. Если так, тогда просто изменим цвет с помощью свойства fill
Цвет svg картинки изменяется с помощью CSS свойства fill - заливки.
Если svg в вставлено в HTML в виде тега img, то нужно добавить следующий js-код:
В данном примере мы используем класс img-svg, который мы добавляем к изображению в HTML-странице, благодаря которому svg-картинка из img станет inline svg.
Изображение было в виде тега img :
Изображение стало inline svg :
Теперь можем изменить цвет нашей svg картинки, используя свойство fill, как в первом примере.
Какие ещё свойства можно применить к svg картинке
Это далеко не полный перечень свойств, которые можно использовать для работы с svg, это лишь самые часто используемые.
Второй способ. Реализуем с помощью свойства mask-image
В HTML создадим два элемента: div и ссылку:
Используем свойство mask-image чтобы задать фон для картинки и background-color чтобы задать цвет:
Читайте также: