Скрыть пользовательский курсор при наведении курсора на iframe - PullRequest
1 голос
/ 14 февраля 2020

Я изо всех сил пытаюсь выяснить, как скрыть свой пользовательский курсор, когда он находится над фреймом.

Я разработал собственный курсор, но он отлично работает во всех веб-разделах. Тем не менее, когда он проходит над 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;

  } 
}

Ответы [ 2 ]

2 голосов
/ 14 февраля 2020

Здесь вам нужно 3 вещи:

  1. Получить элемент iframe

var iframe = document.querySelector("iframe");
Добавить mouseover обработчик событий

iframe.addEventListener("mouseover", function() {
  mouseCursor.style.display = 'none';
})
Добавить mouseleave обработчик событий

iframe.addEventListener("mouseleave", function() {
  mouseCursor.style.display = 'block';
})

Теперь пользовательский курсор будет hidden всякий раз, когда вы наводите курсор мыши на iframe, и он снова станет видимым, как только вы уберете мышь от iframe.

ОБРАТИТЕ ВНИМАНИЕ: Имейте в виду, что я использую querySelector, который возвращает только селектор FIRST, поэтому, если у вас много iFrames, он будет применять код только к первому. Чтобы избежать этого, вы либо используете querySelectorAll или getElementsByTagName, l oop над возвращаемым массивом, и вставляете событие.

1 голос
/ 14 февраля 2020

добавить класс на mouseover и mouseleave так же, как вы делаете со ссылками.

вот так:

https://codepen.io/yoseftuk/pen/RwPrJXx

(Кстати, я делаю некоторые изменения для правильного позиционирования пользовательского курсора)

...