I have an iFrame and what I want to do is to change the height and width of the div when the mouse hovers around the elements inside the iframe, but the mouseover function is not working. What am I missing?
<html>
<body>
<div>
<iframe
id="zzz"
width="500"
height="500"
srcdoc="<html><body><h1>hello</h1><button>click</button><div id='abcd' style='background: red; width: 300px; height: 300px;'></div></body></html>"
></iframe>
</div>
<script>
window.addEventListener("load", () => {
var my_iframe = document.getElementById("zzz").contentWindow.document;
div = my_iframe.getElementById("abcd");
div.style.background = "blue"; //just for testing
my_iframe.addEventListener("mouseover", function (e) {
elem = e.target;
var rect = elem.getBoundingClientRect();
w = rect.width;
h = rect.height;
div.style.width = w;
div.style.height = h;
});
});
</script>
</body>
</html>