3

Подскажите пожалуйста, в чем ошибка? Не могу понять,что делаю не так в простом действии - необходимо,чтобы картинка изменялась при наведении курсора.

.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>

2 ответа 2

3
  • Тегу 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>

1
  • 1
    ого,вот это провал. Каким образом тогда лучше это сделать?
    – Alla
    18 ноя 2016 в 10:33
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%;
}
2
  • Т. е. HTML должен выглядеть таким образом? <a href="/add/" class="izo"></a>
    – Alla
    18 ноя 2016 в 10:36
  • @Alla, Elena Semenchenko написала как нужно сделать, опередила)
    – tCode
    18 ноя 2016 в 10:47

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.