So I made an overlay div over the iframe. I want to show the overlay div when someone is scrolling over the iframe. And I want to remove the overlay when someone is hovering over the iframe to interact with the iframe. There is something wrong with my code. Can anyone show the right way to do it? This is my code:

<div onwheel="f2()" style="display: flex; justify-content: center; height: 90vh; margin-top: 10vh">
     <iframe src="gooey.html" id="gooey" style="position: absolute; z-index: 2; border: 0; width:80vw; height: 100vh;"></iframe>
</div>

<div onmouseover="f1()" style="position: absolute; top:0; left:10vw; right:10vw; bottom:0; z-index: 3;" id="overlay">
</div>

<div class="image-container">
    .............
</div>

Javascript:

function f1() {
   document.getElementById("overlay").style.display = "none";
}

function f2() {
   document.getElementById("overlay").style.display = "block";
}