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

Question

我正在 Wordpress 中使用 Bolts 主题。主页有一个英雄小部件，有 3 "columns"。我想为每个元素使用不同的图片，然后在 :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 以 所有三个 元素为目标，当您在最终 .hero-columns__item:hover 选择器中指定 background-image 时, 它覆盖前两个设置的 background-image 。因此，您设置的最终 background-image 将应用于所有三个元素。

要更正此问题，您需要专门针对第一、第二和第三个元素的选择器。这可以通过使用 pseudo-selector 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 仍然可以链接到 pseudo-selector，如上所示。

此外，不要使用 !important；它携带最大 specificity，除非绝对必要，否则应避免使用。我已经在上面的代码中删除了它们的用法。

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

Change background img hover for separate columns as part of Wordpress theme

html

css

background-image

hover