аватар |

Статьи / CSS /

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

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

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


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

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

1. html с нужным div

Код HTML

<div class="img"></div>

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, но о них я напишу в статьях в соответствующих разделах.

Спасибо за внимание!
 



Распечатать
Похожие статьи
28 ноября 2014 12:57 Плавное увеличение изображения при наведении CSS
15 мая 2017 18:13 Как сделать видео фоном блока на CSS?
03 октября 2014 10:40 Как вызвать кроссбраузерную анимацию загрузки на CSS 3?
19 сентября 2014 17:20 Как изменить вид курсора мыши в CSS
27 ноября 2013 19:53 Набор и примеры элементов Flat UI


Комментарии к статье (vk.com)