аватар Автор: Сергей Касаткин | 05 сентября 2013 16:22

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

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



Похожие статьи


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