CODEWITHSUNDEEP
javascriptjquerycssiframemouseevent
JFelix
JFelix

Reputation: 155

Hide custom cursor when mouseover on iframe

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;

  } 
}

Upvotes: 3

Views: 2134

Answers (2)

Yosef Tukachinsky
Yosef Tukachinsky

Reputation: 5895

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)

Upvotes: 1

Elharony
Elharony

Reputation: 981

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.

Upvotes: 4

Related Questions