Así que hice un div superpuesto sobre el iframe. Quiero mostrar el div superpuesto cuando alguien se desplaza sobre el iframe. Y quiero eliminar la superposición cuando alguien se desplaza sobre el iframe para interactuar con el iframe. Hay algo mal con mi código. ¿Alguien puede mostrar la manera correcta de hacerlo? Este es mi código:

 <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"; }