Creating Dynamic Backgrounds on Hover
https://i.sstatic.net/K9wB2.jpg
I am looking to implement a feature where users can hover over each red box in the picture, triggering a change in the background of the entire container (currently grey) to reveal a different image for each box. In my CSS, I have set up the initial background as grey:
#service {
background: grey;}
To achieve this effect, I wrote the following jQuery code:
$service = $('#service');
$('.service-list').on('mouseover', 'div', function() {
$service.css('background-image', 'url(' + $(this).attr("data-uri") + ')');
});
However, this implementation does not seem to be working as intended. Furthermore, I would like to preload these background images, which are quite large (around 650kb), to ensure a smooth and instantaneous transition. One approach I was considering is creating a hidden div for preloading:
<img src="path/image-01.png" width="1" height="1" alt="Image 01" />
I am unsure if this method will be effective. Any assistance or guidance on how to achieve this functionality would be greatly appreciated.
edit---- Just to clarify, my goal is to change the background of the services container upon hovering over the red boxes, not modify the background of each individual box.