Безусловно, у вебмастера есть много задач, которые он постоянно решает. Сегодня мы поговорим о смене картинки при наведении курсора мыши — если Вы еще не знаете как это сделать, то наш урок будет полезен. Как правило, это делаются с помощью 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». Этот способ является простым и эффективным.