Similar to this question, but I couldn’t make the answers work with my existing code. I have a custom cursor which is an inline svg, it works great everywhere (and scrolls with the page) but gets stuck at the edge of the iframe from a Vimeo embed. I’d like to hide it when the mouse enters the iframe and bring it back when it exits. How can I adjust my code below to make the last part of the JS work correctly?
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
let lastX, lastY, lastScrolled = 0;;
$(document).on('mousemove', function(e) {
lastX = e.pageX - 1;
lastY = e.pageY - 1;
$('#cursor').css({
left: e.pageX - 1,
top: e.pageY - 1,
pointerEvents: 'none'
});
});
$(window).scroll(function(event) {
if (lastScrolled != $(window)
.scrollTop()) {
lastY -= lastScrolled;
lastScrolled = $(window)
.scrollTop();
lastY += lastScrolled;
}
$('#cursor').css({
left: lastX,
top: lastY,
pointerEvents: 'none'
});
});
var iframe = document.querySelector("iframe");
iframe.addEventListener("mouseover", function() {
cursor.style.display = 'none';
})
iframe.addEventListener("mouseleave", function() {
cursor.style.display = 'block';
})
</script>body,html { cursor: none !important; }
#cursor {display: block; position: absolute; z-index: 9999; pointer-events:none;
width: 1.2rem; height: auto; }
/* width: 6.666rem; */
@media only screen and (max-width: 960px) {
* { cursor: default !important; }
#cursor{display: none;}
}
#cursor .cursorshape {fill: #d9e021;}
.embedvid {position: relative; height: 0; overflow: hidden; max-width: 100%;}
.embedvid iframe, .embedvid object, .embedvid embed {position: absolute; top: 0; left: 0; width: 100%; height: 100%;}
.ratio-16-9 {padding-bottom: 56.25%;}<svg version="1.1" id="cursor" style="width:1.2rem;" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 30 38" enable-background="new 0 0 30 38" xml:space="preserve">
<polygon class="cursorshape" points="29.397,31.059 29.397,28.54 29.397,24.939 29.397,22.42 29.397,18.819 29.397,16.3 29.397,10.18
0.603,0.822 0.603,6.942 0.603,9.46 0.603,13.062 0.603,15.581 0.603,19.181 0.603,21.701 0.603,27.82 29.397,37.178 "/>
</svg>
<div style="width:50%">
<div class="embedvid ratio-16-9">
<iframe src='https://player.vimeo.com/video/766323945' frameborder='0' webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>
</div>
</div>