Я изо всех сил пытаюсь выяснить, как скрыть свой пользовательский курсор, когда он находится над фреймом.
Я разработал собственный курсор, но он отлично работает во всех веб-разделах. Тем не менее, когда он проходит над Vimeo iframe, мышь остается на краю iframe и показывает курсор веб-браузера по умолчанию.
Я думаю, что самым простым способом будет скрыть пользовательский курсор всякий раз, когда я делаю указатель мыши на iframe.
Попытка выяснить, используя CSS (применяя отображение: нет, когда пользовательский курсор находится над iframe) и js, но ни один не сработал.
Здесь код в коде ручки: https://codepen.io/felixgonzalo/pen/vYOLrVJ
Это код: JS
let mouseCursor = document.querySelector(".cursor");
let Links = document.querySelectorAll("a");
let logo = document.querySelector(".logo-error");
window.addEventListener('mousemove', cursor);
function cursor(e){
mouseCursor.style.top = e.pageY + "px";
mouseCursor.style.left = e.pageX + "px";
}
Links.forEach(link =>{
if ( link !== logo ){
link.addEventListener("mouseleave", () => {
mouseCursor.classList.remove("link-grow");
});
link.addEventListener("mouseover", () => {
mouseCursor.classList.add("link-grow");
});
}
});
CSS
body{
cursor: none;
}
.cursor{
width: 2rem;
height: 2rem;
border: 2px solid white;
border-radius: 50%;
position: absolute;
transform: translate(-50%, -50%);
transition: all 0.3s ease;
transition-property: background, transform;
transform-origin: 100% 100%;
z-index: 20000;
pointer-events: none;
}
.link-grow{
transform: scale(1.2);
background: white;
mix-blend-mode: difference;
}
a:-webkit-any-link {
cursor: none;
}
.logo-error:hover .cursor{
display: none !important;
}
@media (max-width: 768px){
.cursor {
display: none;
}
}