当鼠标悬停在 iframe 上时隐藏自定义光标

Question

我正在努力寻找如何在 iframe 上隐藏我的自定义光标。

我设计了一个自定义光标，但它在所有网页部分都能正常工作。但是，当它越过 Vimeo iframe 时，鼠标停留在 iframe 的边缘并显示默认的网络浏览器光标。

我认为最简单的方法是在我将鼠标悬停在 iframe 上时隐藏自定义光标。

尝试使用 CSS（当自定义光标位于 iframe 上时应用 display:none）和 js，但 none 成功了。

这里是codepen中的代码：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;

  } 
}

Answer 1

在 mouseover 和 mouseleave 上添加 class，就像您处理链接一样。

像这样：

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

（顺便说一句，我为自定义光标的正确定位做了一些更改）

Answer 2

基本上，您需要 3 样东西：

获取iframe元素

var iframe = document.querySelector("iframe");

添加mouseover事件处理程序

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

添加mouseleave事件处理程序

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

现在，只要您将鼠标悬停在 iframe 上，您的自定义光标就会 hidden，一旦您将鼠标从 iframe 上移开，它就会再次可见。

请注意：请注意，我使用的是 querySelector，其中 returns 仅作为第一个选择器，因此如果您有很多 iFrame，它将只在第一个上应用代码。为避免这种情况，您可以使用 querySelectorAll 或 getElementsByTagName，遍历返回的数组，然后注入事件。

当鼠标悬停在 iframe 上时隐藏自定义光标

Hide custom cursor when mouseover on iframe

javascript

jquery

css

iframe

mouseevent