Создать изображение меняющееся при наведении курсора довольно легко с помощью CSS. Используется background-image, а при событии :hover  - фон меняется. На практике два изображения лучше совместить в одно и двигать при помощи background-position - в этом лежит идея CSS спрайтов. Но что делать если вы хотите не резкую смену изображения, а плавную?

Решение есть. Можно создать дополнительный элемент поверх части нужного изображения и менять ему прозрачность при наведении курсора.

Рассмотрим три способа реализовать это на примере графической стрелки.

Путь первый: Разумный.

Используем дополнительный элемент span. Кладем его поверх нашего исходного элемента делаем прозрачным, а при наведении плавно делаем видимым (используем CSS 3.0 свойство transition).

<a href="#">Стрелка<span></span></a>
.arrow {
   display: inline-block;
   position: relative;
   text-indent: -9999px;
   width: 36px;
   height: 36px;
   background: url(sprites.png) no-repeat;
}
.arrow span {
   position: absolute;
   top: 0; left: 0; bottom: 0; right: 0;
   background: url(sprites.png) no-repeat;
   background-position: -50px 0;
   opacity: 0;
   -webkit-transition: opacity 0.5s;
   -moz-transition: opacity 0.5s;
   -o-transition: opacity 0.5s;
}

.arrow:hover span {
   opacity: 1;
}

Путь второй: Экстра.

В этом решении мы будем использовать псевдоэлемент :before. Переход transition на псевдоэлемент пока поддерживает только Firefox 4, но в будущем такой переход будут поддерживать и остальные браузеры. Раз мы будем использовать псевдоэлемент, то код будет такой:

<a href="#" class="arrow">Стрелка</a>
.arrow:after {
	content: "";
	position: absolute;
	top: 0; left: 0; bottom: 0; right: 0;
	background: url(sprites.png) no-repeat;
	background-position: -50px 0;
	opacity: 0;
	-webkit-transition: opacity 0.5s;
	-moz-transition: opacity 0.5s;
	-o-transition: opacity 0.5s;
}
.arrow:hover:after {
	opacity: 1;
}

Путь третий: Актуальный

Большинство браузеров не поддерживает или псевдоэлементы или переходы к ним. Поэтому мы вернем наш старый код и немного дополним его. К тому же для того, чтобы добиться кроссбраузерности мы будем использовать jQuery.

<a href="#" class="arrow">Стрелка<span></span></a>

.arrow {
	display: inline-block;
	position: relative;
	text-indent: -9999px;
	width: 36px;
	height: 36px;
	background: url(sprites.png) no-repeat;
}
.arrow span {
	position: absolute;
	top: 0; left: 0; bottom: 0; right: 0;
	background: url(sprites.png) no-repeat;
	background-position: -50px 0;
}

$(function() {
	$(".arrow3")
	.find("span")
	.hide()
	.end()
	.hover(function() {
		$(this).find("span").stop().fadeIn();
	}, function() {
		$(this).find("span").stop().fadeOut();
	});
});

Примеры (демо) можно посмотреть тут.

Это перевод статьи с сайта CSS-Tricks.

(5 votes, average: 4,80 из 5)

 Loading ...