自定义div作为游标会导致链接上的悬停问题。

Question

使用绝对div创建的自定义游标有问题，在测试中我意识到自定义div直接定位在默认游标下，如果我悬停一个链接，就无法处理JS“鼠标中心”，因为默认游标总是只悬停在自定义游标上.有办法解决吗？

<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

您可以对游标-div使用pointer-events: none;，这样就可以通过悬停事件。(你还忘了“鼠标中心”中的e

工作示例：

​

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);
   }
}