Html Widget: Affecting Rest of Page

Hi,

I am looking to use a js <script> to create an image that when hovered over it reveals a div on the page (not using css because I want the image to stay revealed [display:block]). I see that this script cannot effect elements outside of the html box. To give you a simple example (css for #revealedimage is set to display:none):
HTML WIDGET CONTENT:

<img id="triggerimage" src="https://icons.iconarchive.com/icons/dan-wiersma/apple-tv/256/Apple-Logo-icon.png" />
    <img id="revealedimage" src="https://icons.iconarchive.com/icons/dan-wiersma/apple-tv/256/Apple-Logo-icon.png" />

<script type="text/javascript">
    var img1 =document.getElementById("triggerimage"), img2 = document.getElementById("revealedimage");
    
    img1.onmouseover = function() {
        img2.style.display="block";
    }
</script>

Works fine in this case (same html widget) but if #revealedimage is contained outside of the html widget the script doesn’t work (I’ve also tried adding the script to the third party Insert Headers and Footers plugin and it also doesn’t work). This can make editing a website very time consuming as I have to recode all the widgets in the widget container I want to have hidden-revealed. I am currently doing the recoding now… Any advice on how to do this easier (or any improvements to Elementor that can help with this would be great!

PS: I’m using Elementor Pro