I am currently developing a website for a client using WordPress and Elementor free here

Currently under the services section (Yes, I am aware when you select 1 of menu items which are anchor links it scrolls to the top of the page first then down to the section, that is another issue I might need help with.) I have it set so when you hover over the icon image it changes to a different coloured version of the image which I have set in the Elementor on hover effects section and the image is set as the background image of an empty container.

When you hover over the text next to the services icon it is also suppose to have the same effect which I have done by giving both the empty container with the image and the text editor CSS IDs and added some custom CSS which I have included below.

#leisure:hover ~ #leisure-image {   background-image:url(https://temp.financedirect.com.au/wp-content/uploads/2024/09/4-1.png);  } 

The 2 sections named vehicle and commercial work as intended which has the text editor first then container with the background image that changes on hover second. The 2 sections named leisure and equipment do not work as intended but do if I swap the text to be first and the icon to be second.

I have tried giving the outer container that holds the text editor and inner container with the background image the CSS ID instead of just the the inner text editor but that still does not effect the inner container background image.

Thank you in advance for any help!

I have tried re-aligning and re-sizing the text editor and container various ways, putting the text editor inside a container, changing CSS IDs, deleting the start of the CSS to confirm the URL is correct and the icon changes as intended, different CSS code and swapping the 2 widgets around.

Only swapping the order of the 2 items does the effect actually work correctly.