Смена картинки при наведении
453
24 ноября 2016, 10:10
Подскажите пожалуйста, в чем ошибка? Не могу понять,что делаю не так в простом действии - необходимо,чтобы картинка изменялась при наведении курсора.
.izo {
display: inline-block;}
a.izo:hover {
background: url("other_pic.png") no-repeat 50% 50%;}<a href="/add/"><img class="izo" src="/pic.png"></a>Answer 1
- Тегу
imgнельзя применить свойствоbackground! - У тега
imgуже по-умолчанию заданоdisplay: inline-block;
Можно применить смену фоновых изображений к ссылке.
Как один из возможных вариантов:
a {
display: inline-block;
}
img {
transition: all .3s ease;
}
a:hover img {
opacity: 0;
}
a:hover {
background: url("http://wpguru.co.uk/wp-content/uploads/2013/09/CSS-Logo-214x300.png") no-repeat 50% 50%;
}<a href="/add/">
<img class="izo" src="https://www.w3.org/html/logo/downloads/HTML5_Logo_256.png">
</a>Answer 2
Вы картинку на HTML добавляете через img src, а пытаетесь изменить свойство background в CSS
Вам нужно картинку добавлять с помощью CSS в класс izo
.izo {
display: inline-block;
background: url("pic.png") no-repeat 50% 50%;}
}
a.izo:hover {
background: url("other_pic.png") no-repeat 50% 50%;
}
-
18:43
Продвижение своими сайтами как стратегия роста и независимости
-
22:46
-
06:18
-
12:23
-
20:41
-
06:31
-
21:28
-
22:18
-
08:00
ТОП-10
- Почему SERVER_ADDR имеет не тот IP 49978 visits
- Как заменить $_SERVER[REMOTE_ADDR] на IP клиента в PHP за двумя Nginx? 31908 visits
- Хочу вывести несколько строк из массива в один div, выводит только много undefined; подскажите, что делать? 25940 visits
- Как через css изменить цвет png изображения? 11729 visits
- Blob video url download 11277 visits
- Php curl запрос через прокси с авторизацией 10683 visits
- Работа с captcha vk api 9479 visits
© "hostciti.net" 15.1.2026 | 12:57