I am working with a Bolts theme in Wordpress. There is a Heroes widget for the main page with 3 "columns". I want to have a different picture for each element and then a different image yet again on the :hover effect.
The 3 static image appear as they should. However, the hover images only show the third selector's declaration to show image 135-3.jpg.
How do I get the first 2 images to be the hover images instead of the third image appearing in all three boxes?
.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;
}
The problem is that the selector .hero-columns__item
targets all three elements, and when you specify the background-image
in the final .hero-columns__item:hover
selector, it overwrites the background-image
set by the previous two. Thus, the final background-image
you set will be applied to all three elements.
To correct this, you'll need selectors that specifically target only the first, second and third elements respectively. This can be done by making use of the 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');
}
Here, each element has a different selector, so only one of the rules will be applied to each. Note that :hover
can still be chained to the pseudo-selector, as is shown above.
Also, don't use !important
; it carries maximum specificity, and should be avoided unless absolutely necessary. I've removed their usages in my code above.