I have a custom cursor implemented and I do not want this cursor to be visible when hovering over the .header element.
To achieve this, I’ve tried:
var isHovered = false;
$('.header').hover(function() {
isHovered = true;
});
if (isHovered){
// hovering over .header, don't show cursor
} else {
// cursor js here
}However, that doesn’t work. Working demo below with my attempt commented out:
/* var isHovered = false;
$('.header').hover(function() {
isHovered = true;
});
*/
/* if (isHovered) { */
const customCursor = (e) => {
const cursor = document.querySelector('.custom-cursor');
const hoverEl = document.querySelectorAll('a.button')
const {
pageX: posX,
pageY: posY
} = e;
const runMouseOver = () => {
cursor.style.transform = 'scale(2)';
};
hoverEl.forEach(hover => hover.addEventListener('mouseenter', runMouseOver));
const runMouseLeave = () => {
cursor.style.transform = '';
cursor.style.background = '';
};
hoverEl.forEach(hover => hover.addEventListener('mouseleave', runMouseLeave));
return (
cursor.style.left = `${posX - 10}px`,
cursor.style.top = `${posY - 10}px`
);
};
document.addEventListener('mousemove', customCursor);
/* } */body {
font-family: "Poppins", sans-serif;
cursor: none;
margin: 0;
}
.bg-black {
background-color: #000;
color: #fff;
}
.bg-white {
color: #000;
background-color: #fff;
}
.header{
color: #fff;
height: 100px;
background-color: #5F249F;
}
section {
height: 100vh;
min-height: 300px;
display: flex;
align-items: center;
justify-content: center;
}
h1 {
font-size: 6rem;
letter-spacing: 0.125rem;
}
.custom-cursor {
position: absolute;
width: 0.875rem;
height: 0.875rem;
background-color: #fff;
border-radius: 50%;
mix-blend-mode: difference;
pointer-events: none;
z-index: 100;
transition: top 0.0125s ease-in-out, left 0.0125s ease-in-out,
transform 0.3s ease-in-out;
}<body>
<div class="custom-cursor js-cursor"></div>
<main>
<header class="header">
Header
</header>
<section class="section-1 bg-black">
<h1 class="js-cursor-hover">
Hello world
</h1>
</section>
<section class="section-2 bg-white">
<h1 class="js-cursor-hover">
Hello world
</h1>
</section>
</main>
</body>Advertisement
Answer
I would only attach the mouse move listener to sections.
let els = document.querySelectorAll('section');
els.forEach(el => el.addEventListener('mousemove', customCursor));
const cursor = document.querySelector('.custom-cursor');
const runMouseOver = () => cursor.style.transform = 'scale(2)';
const runMouseLeave = () => {
cursor.style.transform = '';
cursor.style.background = '';
};
const customCursor = (e) => {
const {
pageX: posX,
pageY: posY
} = e;
return (
cursor.style.left = `${posX - 10}px`,
cursor.style.top = `${posY - 10}px`
);
};
let els = document.querySelectorAll('section');
els.forEach(el =>
{
el.addEventListener('mousemove', customCursor);
const links = el.querySelectorAll('a.button')
links.forEach(link =>
{
link.addEventListener('mouseenter', runMouseOver);
link.addEventListener('mouseleave', runMouseLeave);
});
});
const header = document.querySelector('header');
header.addEventListener('mouseenter', () => cursor.style.visibility = 'hidden');
header.addEventListener('mouseleave', () => cursor.style.visibility = 'visible');body {
font-family: "Poppins", sans-serif;
cursor: none;
margin: 0;
}
.bg-black {
background-color: #000;
color: #fff;
}
.bg-white {
color: #000;
background-color: #fff;
}
.header{
color: #fff;
height: 100px;
background-color: #5F249F;
}
section {
height: 100vh;
min-height: 300px;
display: flex;
align-items: center;
justify-content: center;
}
h1 {
font-size: 6rem;
letter-spacing: 0.125rem;
}
.custom-cursor {
position: absolute;
width: 0.875rem;
height: 0.875rem;
background-color: #fff;
border-radius: 50%;
mix-blend-mode: difference;
pointer-events: none;
z-index: 100;
transition: top 0.0125s ease-in-out, left 0.0125s ease-in-out,
transform 0.3s ease-in-out;
}<body>
<div class="custom-cursor js-cursor"></div>
<main>
<header class="header">
Header
</header>
<section class="section-1 bg-black">
<h1 class="js-cursor-hover">
Hello world
</h1>
</section>
<section class="section-2 bg-white">
<h1 class="js-cursor-hover">
Hello world
</h1>
<a class="button" href=''>link</a>
</section>
</main>
</body>I have also moved around the addListeners for the anchors, to make sure they’re only attached once.