Анимация гифки только при наведении мыши

Пятница, Сентябрь 30, 2016, 13:50 | В записную книжку, Вебмастеру | 505 просм. | Нет комментариев

Понадобилась как-то раз такая штука, поискала рецепты, понравился только один, в блоге интернет технологий. Метод без яваскрипта, построен только на CSS. Минус у него, конечно, тоже есть: нужно создавать еще одну картинку, без анимации, которая будет показываться посетителю по дефолту, без наведения мыши.

Тем не менее, забираю в свою записную книжку. Код, в общем, такой.

Оформление картинки (задание класса):

<a class="gif" href="#"><img src="animation.gif" alt="" /></a>

Сам стиль:

.gif {
display:block; /* Устанавливаем */
width:150px; /* Ширина и высота картинки */
height:150px;
background:url('stat.gif') no-repeat; /* Заливаем блок статичной картинкой */
}
 
/* Как видно, начальное (статическое) изображение задано как фон блока с шириной и высотой этого изображения. */
a.gif img {
visibility:hidden; /* Aнимация не была видна в ситуации, когда мышь не наведена */
}
 
a.gif:hover {
background:none; /* Фон (статичное изображение) не было видно при наведении мыши */
}
 
a.gif:hover img {
visibility:visible; /* При наведении анимация показывается */
border:0; /* без обрамления ;) */

Похожие записи:

Понравилось? Поделись ссылкой с друзьями!

Метки:

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


1 + = шесть