Do not execute JS if hovering over specific element-CodePudding

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 ></div>
  <main>
    <header >
      Header
    </header>
  
    <section >
       <h1 >
          Hello world
      </h1>
    </section>
    <section >
       <h1 >
          Hello world
      </h1>
    </section>
  </main>
</body>

CodePudding user response：

I would only attach the mouse move listener to sections.

let els = document.querySelectorAll('section');
els.forEach(el => el.addEventListener('mousemove', customCursor));

/* 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`
    );

  };

let els = document.querySelectorAll('section');
els.forEach(el => el.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 ></div>
  <main>
    <header >
      Header
    </header>
  
    <section >
       <h1 >
          Hello world
      </h1>
    </section>
    <section >
       <h1 >
          Hello world
      </h1>
    </section>
  </main>
</body>

CodePudding user response：

Since you've already got an eventlistener on mousemove, you can get the position and element that the mouse is over using Document.elementFromPoint():

var x = event.clientX, y = e.clientY;
var hover = document.elementFromPoint(x, y);

if (hover.tagName === 'HEADER') {
  document.body.style.cursor = 'auto';
}

const customCursor = (e) => {
  
    var x = event.clientX, y = e.clientY;
    var hover = document.elementFromPoint(x, y);

    if (hover.tagName === 'HEADER') {
      document.body.style.cursor = 'unset';
    } else {
      document.body.style.cursor = 'none';
  
      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 ></div>
  <main>
    <header >
      Header
    </header>
  
    <section >
       <h1 >
          Hello world
      </h1>
    </section>
    <section >
       <h1 >
          Hello world
      </h1>
    </section>
  </main>
</body>