自定义 div，因为光标会导致悬停在链接上时出现问题

Question

我使用绝对 div 创建的自定义光标有问题，通过我的测试我意识到自定义 div 直接位于默认光标下，然后如果我悬停link 我无法处理我的 JS“mouseenter”，因为默认光标始终只悬停在自定义光标上...有办法解决它吗？

<div class="custom-cursor"></div>

Scss:

.custom-cursor {
   width: 20px;
   height: 20px;
   border: 2px solid orange;
   position: absolute;
   z-index: 1080;
   border-radius: 50%;
   transition-duration: 100ms;
   transition-timing-function: ease-out;
   box-shadow: 0 0 0 2px black;
   &.hover {
      width: 40px;
      height: 40px;
      background: rgba(#FFCC00,.5);
   }
}

香草 JS：

const cursor = document.querySelector('.custom-cursor');
    
// Custom cursor follow the default cursor
document.addEventListener('mousemove', e => {
    cursor.setAttribute('style', 'top: '+(e.pageY - 10)+'px; left: ' +(e.pageX - 10)+'px;')
});

const links = document.querySelectorAll('a');

// Custom cursor change style on hover links
for(let x of links) {

    x.addEventListener('mousenter', () => {
     cursor.classList.add('hover');
    });

    x.addEventListener('mouseleave', () => {
     cursor.classList.remove('hover');
    });
        
});

Answer 1

您可以使用 pointer-events: none; 作为光标 - div - 这样悬停事件就会通过。（您还忘记了 e 在“mouseenter”

工作示例：

const cursor = document.querySelector('.custom-cursor');
    
// Custom cursor follow the default cursor
document.addEventListener('mousemove', e => {
    cursor.setAttribute('style', 'top: '+(e.pageY - 10)+'px; left: ' +(e.pageX - 10)+'px;')
});

const links = document.querySelectorAll('a');

// Custom cursor change style on hover links
for(let x of links) {

    x.addEventListener('mouseenter', () => {
     cursor.classList.add('hover');
    });

    x.addEventListener('mouseleave', () => {
     cursor.classList.remove('hover');
    });
        
}

.custom-cursor {
   width: 20px;
   height: 20px;
   border: 2px solid orange;
   position: absolute;
   border-radius: 50%;
   transition-duration: 100ms;
   transition-timing-function: ease-out;
   box-shadow: 0 0 0 2px black;
   pointer-events: none;
}

.custom-cursor.hover {
      width: 40px;
      height: 40px;
      background: rgba(#FFCC00,.5);
}

<div class="custom-cursor"></div>
<a href="#">troet</a>
<a href="#">quak</a>
<a href="#">miau</a>

Answer 2

You can enable clicking through elements by adding pointer-events: none; to your CSS

.custom-cursor {
   pointer-events: none; /*don't interact with this div*/
   width: 20px;
   height: 20px;
   border: 2px solid orange;
   position: absolute;
   z-index: 1080;
   border-radius: 50%;
   transition-duration: 100ms;
   transition-timing-function: ease-out;
   box-shadow: 0 0 0 2px black;
   &.hover {
      width: 40px;
      height: 40px;
      background: rgba(#FFCC00,.5);
   }
}

自定义 div，因为光标会导致悬停在链接上时出现问题

Custom div as cursor creates problems with the hover on links

javascript

css

mouse-cursor