Как при наведении на картинку заменить ее на другую картинку css

Как сделать, чтобы картинка менялась при наведении на нее курсора мыши?

Заменить одну картинку на другую при наведении на неё курсора мыши.

Решение

Смена одной картинки на другую при наведении на неё курсора мыши называется эффектом перекатывания. Обычно для создания эффекта перекатывания применяется JavaScript, но в большинстве случаев вполне достаточно и CSS.

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

Вначале разберём, как делается собственно сам эффект. Для этой цели используется псевдокласс :hover , он добавляется к желаемому селектору. Этот псевдокласс определяет стиль элемента, когда на него наводится курсор мыши, что нам как раз и требуется. Сразу отметим, что в браузере Internet Explorer версии 6 и ниже :hover работает только со ссылками, тогда как другие браузеры понимают :hover и для других элементов. Так что для универсальности придётся помещать изображение внутрь контейнера . Сам рисунок добавляется и меняется с помощью стилевого свойства background . Алгоритм действий следующий.

Готовятся два изображения одинакового размера, одно для исходного вида, а второе — для его замены при эффекте перекатывания.
Исходная картинка добавляется в качестве фонового рисунка к селектору A через стилевое свойство background со значением url(URI) , здесь URI — путь к графическому файлу.
Присоединяем псевдокласс к селектору A и снова включаем свойство background , но в качестве значения указываем замещающее изображение.
Чтобы ссылка была по размеру картинки, её следует превратить в блочный элемент с помощью свойства display со значением block , а также задать высоту и ширину ссылки.

На рис. 1 приведены два изображения: исходное (рис. 1а) и замещающее (рис. 1б).

Рис. 1а а Рис. 1б б

Рис. 1. Картинки для создания эффекта перекатывания

Остаётся собрать весь код воедино, как показано в примере 1. Чтобы ссылка не вела на какой-то определенный файл, что в данном случае излишне, добавим «заглушку» в виде символа решетки (#) к атрибуту href тега .

Пример 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 и становится видна оранжевая вкладка.

Как менять картинку при наведении курсора мыши

Я думаю, что Вы часто встречали на различных сайтах, когда Вы наводили мышкой на какую-нибудь картинку, и она менялась. Самый простой пример — это наведение курсора мыши на кнопку. Допустим, после этого она меняла цвет, как бы делаясь активной. Вот о том, как менять картинку при наведении курсора мыши, Вы узнаете из этой статьи.

Многие, конечно, будут делать это на JavaScript, хотя это совершенно неразумно. Такие вещи делаются с помощью CSS и псевдоэлемента hover. Давайте с Вами поставим задачу.

У нас есть картинка. Мы хотим, чтобы при наведении на неё курсора мыши, она изменялась. Более того, мы хотим, чтобы ещё появлялась красная рамка вокруг картинки.

HTML-код очень простой:

.img background: url(«image_1.jpg») no-repeat; // Подставляем картинку по умолчанию
height: 100px; // Высота картинки
width: 100px; // Ширина картинки
>
.img:hover background: url(«image_2.jpg») no-repeat; // Подставляем ту картинку, которая будет при наведении курсора мыши
border: 2px solid #f00; // Устанавливаем красную рамку
height: 120px; // Высота новой картинки
width: 120px; // Ширина новой картинки
>

Ключевой ошибкой новичков является отсутствие свойств width и height. Без них пустой блок div просто не отобразится, поэтому не забывайте о том, что нужно указывать напрямую ширину и высоту, и они должны совпадать с шириной и высотой изображения, которое Вы подтсавляете в блок.

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

Полный курс по HTML, CSS и по вёрстке сайтов: http://srs.myrusakov.ru/makeup

Создано 04.06.2012 12:53:28

Михаил Русаков

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

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

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

Кнопка:
Она выглядит вот так:
Текстовая ссылка:
Она выглядит вот так: Как создать свой сайт
BB-код ссылки для форумов (например, можете поставить её в подписи):

Комментарии ( 63 ):

soffrick 05.06.2012 11:18:12

Еще бы не помешало познакомиться с другими псевдоклассами. А также картинку можно менять и средствами JavaScript (событие Onmouseover=»document.getElementById(‘imageID’).src=’путь к новой картинке'»)

Admin 05.06.2012 14:27:07

Да, по псевдоклассам обязательно напишу статью в ближайшее время. А через JavaScript такие вещи делать не нужно, и данный способ (который Вы показали) применяется в других статьях.

soffrick 05.06.2012 16:00:53

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

soffrick 05.06.2012 18:14:30

Ещё бы не помешало познакомиться со спрайтами и сэкономить на дополнительных картинках 🙂

kuller 16.06.2012 10:26:25

на js можно зделать более интересней смену картинок. хотя сам тоже пользуюсь css

zuryan 16.06.2012 20:14:11

Все понятно доступно Спасибо за науку!

lev_100rus 10.07.2012 16:44:13

Михаил! А как сделать, чтобы при наведении на кнопку она не сразу становилась красная к примеру, а медленно начинала краснеть!))) И тоже самое при отведении мыши от кнопки? Надо сделать к примеру в фотошопе gif анимацию и в css коде указать путь.gif так?

Admin 10.07.2012 17:40:46

Можно и так, а можно через JavaScript это сделать.

lev_100rus 10.07.2012 18:13:00

На моём сайте все кнопки были сделаны при помощи js! Но как тут уже писали не у всех он включён! Переделал всё на css! Спасибо за ответ!

setsumi 28.08.2012 14:37:46

Здравствуйте! Я ставлю тег между тегом , чтобы при наведении курсора на ссылку менялась картинка. Проблема в том, что код становится невалидным, то есть тег не может стоять на этом месте. Подскажите, пожалуйста, как можно исправить ситуацию.

Admin 28.08.2012 19:38:43

Туда нельзя поставить в любом случае. Всё, что можно сделать — поставить туда

setsumi 28.08.2012 20:32:19
setsumi 29.08.2012 06:38:26

Так, а при span ни картинки, ни ссылки не отображаются. Что делать?

Admin 29.08.2012 11:53:58
setsumi 29.08.2012 12:01:19
Admin 29.08.2012 12:12:49
setsumi 29.08.2012 12:24:49

К сожалению, это не подойдет. Я пыталась так сделать, но получилась полнейшая чушь. Мне нужна ссылка картинкой, которая притом меняется при наведении на нее курсора. А так получается, что она вместе с текстом, который совершенно не нужен. Пробовала вставить картинку — та же ситуация. Я не знаю, может быть есть какой-нибудь другой способ, кроме java? Или проще оставить дивы? Я смотрела в разных браузерах, все отображается корректно, за исключением ie. Но и там, разве что картинка не меняется. Может быть, это не сильно страшно — для одного-то браузера.

Admin 30.08.2012 22:09:03

Если не сильно страдает кроссбраузерность, можете и оставить как есть.

bosna 20.09.2012 01:39:31

Михаил, подскажите пожалуйста. вот учебный сайт http://spiceboxes.ru/test-s/ Я хочу, чтобы при наведении курсора на пункты меню, они меняли цвет. но получается только рамка при наведении курсора. и еще. я прописывала hover для всех тегов «а», но такой эффект только на верхнем меню получается, для ссылок в футере это не работает (и не надо, чтоб работало, но странно, что так получается). в чем ошибки?

Admin 20.09.2012 12:19:02

Не работает потому, что неправильно прописываете селекторы для hover, поэтому видно только рамку внешнего элемента, или вообще не срабатывает.

bosna 20.09.2012 12:28:06

в чем неправильно. вроде все как положено

Admin 20.09.2012 16:59:51

Если работает, отлично. А если не получается задавать сразу, то проще всего менять свойства в firebug, чтобы сразу видеть результат.

master 13.11.2012 00:54:24

Здравствуйте Михаил. При кодировке текста сайта создаю ссылки в шапке сайта с переходом на разделы текста на этой же странице с помощью фотографий. Как сделать ссылками эти же фото, но уже на другой странице с переходом не просто на предыдущую страницу, а на эти же якоря в текстах?

Admin 13.11.2012 06:41:54

Не понял вопроса.

master 13.11.2012 10:15:55

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

Admin 13.11.2012 10:39:51
master 13.11.2012 11:21:16

Большое спасибо. А как задавать свой аватар в различных комментариях? Просто обязывает мой возраст.

Admin 13.11.2012 11:24:35

В каких комментариях?

master 13.11.2012 11:34:34

Например, я пишу этот коммент. И вместо моего аватара написано, «аватар не задан», а у Вас ваше фото и имя.

Admin 13.11.2012 11:39:52

В пользовательском меню перейдите по ссылке: «Редактировать профиль». Там Вы сможете загрузить аватар.

master 15.11.2012 16:42:32

Здравствуйте Михаил, ещё раз прошу о помощи. По вашему совету делаю так:

— это прямо в тексте на одной странице. А это ссылка на неё с другой страницы: Не получается сделать ссылку с одной страницы на другую в соответствующее место текста. При переходе появляется страница с 404 ошибка.

Admin 15.11.2012 17:04:09

page.html — это пример названия страницы, у Вас она может быть index.html, about.html или page_1.html. Вы должны его заменить на своё название, тогда и не будет 404.

master 15.11.2012 20:30:27

Как я не догадался! Спасибо за науку. Буду продолжать изучение вашего курса «Создание сайта от А до Я» Ваша отзывчивость и готовность помочь вызывает особое уважение.

Смена картинки при наведении

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

.izo < display: inline-block;>a.izo:hover

Отслеживать
3,606 4 4 золотых знака 21 21 серебряный знак 43 43 бронзовых знака
задан 18 ноя 2016 в 10:30
541 1 1 золотой знак 5 5 серебряных знаков 21 21 бронзовый знак

2 ответа 2

Сортировка: Сброс на вариант по умолчанию

Тегу img нельзя применить свойство background !
У тега img уже по-умолчанию задано display: inline-block;

Можно применить смену фоновых изображений к ссылке.

Как один из возможных вариантов:

a < display: inline-block; >img < transition: all .3s ease; >a:hover img < opacity: 0; >a:hover < background: url("http://wpguru.co.uk/wp-content/uploads/2013/09/CSS-Logo-214x300.png") no-repeat 50% 50%; >

Отслеживать
ответ дан 18 ноя 2016 в 10:32
22.3k 10 10 золотых знаков 56 56 серебряных знаков 118 118 бронзовых знаков
ого,вот это провал. Каким образом тогда лучше это сделать?
18 ноя 2016 в 10:33

Вы картинку на HTML добавляете через img src , а пытаетесь изменить свойство background в CSS

Вам нужно картинку добавлять с помощью CSS в класс izo

.izo < display: inline-block; background: url("pic.png") no-repeat 50% 50%;>> a.izo:hover

Отслеживать
ответ дан 18 ноя 2016 в 10:33
3,606 4 4 золотых знака 21 21 серебряный знак 43 43 бронзовых знака
18 ноя 2016 в 10:36
@Alla, Elena Semenchenko написала как нужно сделать, опередила)
18 ноя 2016 в 10:47

html
css

Важное на Мете

Подписаться на ленту

Лента вопроса

Для подписки на ленту скопируйте и вставьте эту ссылку в вашу программу для чтения RSS.

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

Как заменить изображение при наведении на него курсора? CSS

Многие из Вас ещё, независимо от знаний вёрстки и программирования, сталкивались с
заменой изображения при наведении на него. Самый частый пример — наведение курсора мыши на кнопку. В результате картинка менялась, возможно даже в размерах и форме. В данной статье я покажу как можно заменить изображение, изменить его размер при наведении на него, используя только CSS.

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

Что будем использовать? Нам достаточно псевдоэлемента hover и свойства background. Из файлов это сам html файл и изображение.

В реализации всё просто. Код состоит из двух частей:

1. html с нужным div

Код HTML

2. свойства css для div

Код CSS

.img background: url("image001.jpg") no-repeat; /* изображение по умолчанию */ 
height: 120px; /* высота изображения */ 
width: 120px; /* ширина изображения */ 
> 
.img:hover background: url("image002.jpg") no-repeat; /* новое изображение */ 
border: 2px solid #f00; // Устанавливаем красную рамку 
height: 120px; /* высота изображения */ 
width: 120px; /* ширина изображения */ 
>

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

Демонстрация Скачать исходники
Как вы видите на примере, изображение, указанное по умолчанию (то есть image001), появляется при загрузке страницы, а image002 только при наведении курсора на первое изображение.

Внимание! Нужно обязательно указывать ширину и высоту блока, в противном случае div просто не отобразится. Также будьте внимательны с указанием точных размеров блока, так как изображение внутри не будет масштабировано, так как оно считается фоновым. Если размеры блока будут меньше, то и видна будет только часть изображения.

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

Да, существуют и другие способы заменить изображение: JS, библиотека jQuery, CSS3, но о них я напишу в статьях в соответствующих разделах.