css - 作为 Wordpress 主题的一部分，更改单独列的背景图像悬停

Question

我在 Wordpress 中使用 Bolts 主题。主页有一个 Heroes 小部件，有 3 个“列”。我想为每个元素使用不同的图片，然后在 :hover 效果上再次使用不同的图片。

3 个静态图像按应有的方式显示。但是，悬停图像仅显示第三个选择器的声明以显示图像 135-3.jpg。

如何让前两张图片成为悬停图片，而不是第三张图片出现在所有三个框中？

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

Answer 1

问题在于选择器 .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；它携带最大 specificity ，除非绝对必要，否则应避免使用。我在上面的代码中删除了它们的用法。