Проблема в том, что селектор .hero-columns__item
нацелен на все три элемента , и когда вы указываете background-image
в конечном селекторе .hero-columns__item:hover
, он перезаписывает background-image
устанавливается предыдущими двумя.Таким образом, последний установленный background-image
будет применен ко всем трем элементам.
Чтобы исправить это, вам понадобятся селекторы, которые специально нацелены только на первый, второй и третий элементы соответственно.Это можно сделать, используя псевдоселектор nth-of-type
:
.hero-columns__item:nth-of-type(1) {
background-image: url('http://newsite.com/wp-content/uploads/2019/02/MainPageBannersResidential.jpg');
}
.hero-columns__item:nth-of-type(1):hover {
background-image: url('http://newsite.com/wp-content/uploads/2016/04/171-5.jpg');
}
.hero-columns__item:nth-of-type(2) {
background-image: url('http://newsite.com/wp-content/uploads/2019/02/MainPageBannersTerraceHousing2.jpg');
}
.hero-columns__item:nth-of-type(3):hover {
background-image: url('http://newsite.com/wp-content/uploads/2016/04/177-5.jpg');
}
.hero-columns__item:nth-of-type(3) {
background-image: url('http://newsite.com/wp-content/uploads/2019/02/MainPageBannersDevelopments.jpg');
}
.hero-columns__item:nth-of-type(3):hover {
background-image: url('http://newsite.com/wp-content/uploads/2016/04/135-3.jpg');
}
Здесь каждый элемент имеет свой селектор, поэтому только один изправила будут применяться к каждому.Обратите внимание, что :hover
все еще может быть связан с псевдоселектором, как показано выше.
Также не используйте !important
;он имеет максимальную специфичность , и его следует избегать, если в этом нет крайней необходимости.Я удалил их использование в моем коде выше.