Здравствуйте Гость!


Запомнить.
Авто. вход.
Забыли пароль?
Регистрация

ПОДПИСКА Подписавшись по E-mail, Вы будете получать уведомления о новых статьях к себе на почту.
Подписатся на почтовую рассылку на сайте astranar.ru
Подписаться



ДОБАВЛЯЙТЕСЬ В ДРУЗЬЯ Добавляйтесь ко мне в друзья ВКонтакте! Отзывы о сайте и обо мне оставляйте на стене моего аккаунта.
Мой аккаунт Вконтакте
Мой аккаунт
Главная - CSS - Как менять картинку при наведении курсора мыши


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


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

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


Для начала нам нужен HTML код где все действие и будет происходить:






А теперь CSS код:


.smena{
background: url("img_1.jpg") no-repeat; // Подставляем картинку по умолчанию
height: 100px; // Высота картинки
width: 100px; // Ширина картинки
}
.smena:hover {
background: url("img_2.jpg") no-repeat; // Подставляем ту картинку, которая будет при наведении курсора мыши
border: 2px solid green; // Устанавливаем зеленую рамку
height: 120px; // Высота новой картинки
width: 120px; // Ширина новой картинки
}



Но НЕ забудьте что обязательно нужно указывать width и height у div, без них на экране ничего не появится. И не забывайте что ширина и высота блока div должна совпадать с размерами изображения которое вы подставляете в блок.

Удачи вам, что не ясно, спросите - отвечу.



Просмотров страницы: 6690
Урок добавлен: 11 Августа 2012

<<<Предыдущая статьяСледущая статья >>>

Копирование материалов разрешается только с указанием автора (Пальгов Олег) и индексируемой прямой ссылкой на сайт (https://astranar.ru/)!

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

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


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

Ещё статьи по css:
Как установить курсор через CSS
CSS атрибуты и значения, определяющие неподвижный фон
Как сделать закруглённые углы через CSS
Как сделать тени вокруг блока css


Комментарии (0)


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

Джон Стюарт Милль


Вступайте в группу!