Skip to content
Advertisement

Do not execute JS if hovering over specific element

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.

User contributions licensed under: CC BY-SA
7 People found this is helpful
Advertisement