文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布
社区首页 >问答首页 >如果悬停在特定元素上，则不要执行JS

问如果悬停在特定元素上，则不要执行JS
EN

Stack Overflow用户
提问于 2022-01-19 11:47:15
回答 2查看 67关注 0票数 1

我已经实现了一个自定义游标，并且我不希望当hovering在.header元素上时这个游标是可见的。

为了达到这个目的，我试过：

​

代码语言：javascript
复制
var isHovered = false;

$('.header').hover(function() {
  isHovered = true;
});

if (isHovered){
  // hovering over .header, don't show cursor
} else {
  // cursor js here
}

​

然而，这是行不通的。下面的工作演示用我的尝试注释掉了：

​

代码语言：javascript
复制
/* 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);

/* } */
代码语言：javascript
复制
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;
}
代码语言：javascript
复制
<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>

​

css
javascript
jquery
EN

回答 2

Stack Overflow用户

回答已采纳

发布于 2022-01-19 13:10:22

我只会将鼠标移动侦听器附加到区段。

代码语言：javascript
复制
let els = document.querySelectorAll('section');
els.forEach(el => el.addEventListener('mousemove', customCursor));

​

代码语言：javascript
复制
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');
代码语言：javascript
复制
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;
}
代码语言：javascript
复制
<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>

​

我还为锚移动了addListeners，以确保它们只附加了一次。

票数 2
EN

Stack Overflow用户

发布于 2022-01-19 11:57:01

因为您已经在mousemove上有了一个事件侦听器，所以您可以使用Document.elementFromPoint()获得鼠标已经结束的位置和元素

代码语言：javascript
复制
var x = event.clientX, y = e.clientY;
var hover = document.elementFromPoint(x, y);

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

​

代码语言：javascript
复制
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);

/* } */
代码语言：javascript
复制
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;
}
代码语言：javascript
复制
<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>

​

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：

https://stackoverflow.com/questions/70770065

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档