• RSS
✎ Помощь начинающим и профессиональным блоггерам, создание, поддержка сайтов и блогов e-mail siteblogger@inbox.ru icq 353-724-370

Главная ›› Уроки по CSS, CSS3 ›› Смена картинки при наведении мыши

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

Безусловно, у вебмастера есть много задач, которые он постоянно решает. Сегодня мы поговорим о смене картинки при наведении курсора мыши — если Вы еще не знаете как это сделать, то наш урок будет полезен. Как правило, это делаются с помощью CSS и псевдоэлемента «hover».

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

Давайте рассмотрим пример. Допустим, что есть картинка и нужно, чтобы при наведении на неё курсора мыши, она менялась и вокруг картинки появлялась рамка красного цвета.

Код HTML имеет вид:

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

Стили CSS имеют вид:

.img {
background: url("kartinka-1.jpg") no-repeat;
height: 100px;
width: 100px;
}
.img:hover {
background: url("kartinka-2.jpg") no-repeat;
border: 1px solid #red;
height: 150px;
width: 150px;
}

Как видно из примера, ничего сложного нет. Мы задали исходную картинку с определенными стилями. Вторая картинка будет отображаться при наведении на нее курсора мыши, соответственно, с другими стилями — за это отвечает псевдоэлемент «hover». Этот способ является простым и эффективным.

Поделиться ссылкой:


« 
 »

Читайте также:

Оставить комментарий


  • RSS

«Как создать и продвинуть свой сайт»

2011–2017 © Siteblogger.ru
Рейтинг@Mail.ru