Смена картинки при наведении

314

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%;
}

Создание интернет-магазина парфюмерии в ABCname

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

Resource interpreted as Stylesheet but transferred with MIME type text/html: “http://site.ru/page/param”

Здравствуйте в чем может быть проблема, когда задаю параметр http://site. ru/page/param в param или ставлю слэш дополнительный на сайте слетают стили и скрипты,...

434

CSS