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 ，除非绝对必要，否则应避免使用。我已在上面的代码中删除了它们的用法。

将背景img悬停更改为Wordpress主题的单独列

1 个答案: