Home » Jquery » javascript – Hide custom cursor when mouseover on iframe-Exceptionshub

javascript – Hide custom cursor when mouseover on iframe-Exceptionshub

Posted by: admin February 24, 2020 Leave a comment

Questions:

I am struggling trying to find out how to hide my custom cursor when it’s over an iframe.

I designed a custom cursor but it works fine in all the web sections. However, when it goes over he Vimeo iframe, the mouse stay at the edge of the iframe and shows the default web browser cursor.

I think the easiest way, would be hide the custom cursor whenever I make mouseover on the iframe.

Trying to figure out by using CSS (applying display:none when is the custom cursor is over the iframe) and js but none worked out.

Here the code in codepen: https://codepen.io/felixgonzalo/pen/vYOLrVJ

This is the code:
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;

  } 
}
How to&Answer:

Basically, you need 3 things here:

  1. Get the iframe element
var iframe = document.querySelector("iframe");
  1. Add mouseover event handler
iframe.addEventListener("mouseover", function() {
  mouseCursor.style.display = 'none';
})
  1. Add mouseleave event handler
iframe.addEventListener("mouseleave", function() {
  mouseCursor.style.display = 'block';
})

Now, your custom cursor will be hidden whenever you hover over the iframe, and it will become visible again once you move the mouse away from your iframe.

PLEASE NOTE: Be aware that I am using querySelector which returns the FIRST selector only, so in case you have many iFrames, it will only apply the code on the first one. To avoid this, you either use querySelectorAll or getElementsByTagName, loop over the returned array, and inject the event.

Answer:

add class on mouseover and mouseleave just as you do with links.

like this:

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

(btw I make some changes for proper positioning of the custom cursor)