Изменение фона img наведения для отдельных столбцов как часть темы Wordpress - PullRequest
Новая
       19

Изменение фона img наведения для отдельных столбцов как часть темы Wordpress

0 голосов
/ 07 мая 2019

Я работаю с темой Bolts в Wordpress. Для главной страницы есть виджет «Герои» с 3 «столбцами». Я хочу, чтобы у каждого элемента было другое изображение, а затем другое изображение с эффектом: hover.

3 статических изображения появляются так, как они должны. Тем не менее, наведенные изображения показывают только объявление третьего селектора, чтобы показать изображение 135-3.jpg.

Как я могу получить первые 2 изображения в качестве парящих изображений вместо третьего изображения, появляющегося во всех трех полях? 

.hero-columns__item {
  background-image: url('http://newsite.com/wp-content/uploads/2019/02/MainPageBannersResidential.jpg');
}

.hero-columns__item:hover {
  background-image: url('http://newsite.com/wp-content/uploads/2016/04/171-5.jpg') !important ;
}

.hero-columns__item {
  background-image: url('http://newsite.com/wp-content/uploads/2019/02/MainPageBannersTerraceHousing2.jpg');
}

.hero-columns__item:hover {
  background-image: url('http://newsite.com/wp-content/uploads/2016/04/177-5.jpg') !important;
}

.hero-columns__item {
  background-image: url('http://newsite.com/wp-content/uploads/2019/02/MainPageBannersDevelopments.jpg');
}

.hero-columns__item:hover {
  background-image: url('http://newsite.com/wp-content/uploads/2016/04/135-3.jpg') !important;
}

1 Ответ

0 голосов
/ 07 мая 2019

Проблема в том, что селектор .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;он имеет максимальную специфичность , и его следует избегать, если в этом нет крайней необходимости.Я удалил их использование в моем коде выше.

...