我有一个问题... 我用 CSS 元素和一些 JS 制作了一个自定义光标，所以光标位于元素和光标之间，所以它阻止了链接和所有按钮 所以我有一个问题，如何让自定义光标让点击通过
document.onmousemove = function(e) {
document.body.style.setProperty('--x',(e.clientX)+'px');
document.body.style.setProperty('--y',(e.clientY)+'px');
document.getElementById('cur').style.setProperty('top',(e.clientY)+'px');
document.getElementById('cur').style.setProperty('left',(e.clientX)+'px');
}body{
cursor:none;
}
.link{
color:black;
font-weight:800;
font-size:5vw;
}
.curInv {
color:#fff;
content:"";
position:relative;
width: 3em;
height: 3em;
transform: translate(-50%,-50%);
background: radial-gradient(farthest-side ,#fff 95%,transparent 100%) calc(var(--x) + .75em) calc(var(--y) + .75em)/1.5em 1.5em fixed no-repeat;
mix-blend-mode:difference;
}
.background{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100vh;
z-index: -900;
background: url('https://ih0.redbubble.net/image.51791798.1990/pp,550x550.u2.jpg') #000 no-repeat;
background-position: center;
background-size: cover;
}<body>
<div class="background"></div>
<div class="curInv" id="cur"></div>
<center><a href="http://www.example.com" class="link">A HREF Link</a></center>
</body>瞧!
最佳答案
您需要在覆盖页面的容器上设置 pointer-events: none;。在本例中为 curInv 容器。
.curInv {
color:#fff;
content:"";
position:relative;
width: 3em;
height: 3em;
transform: translate(-50%,-50%);
background: radial-gradient(farthest-side ,#fff 95%,transparent 100%) calc(var(--x) + .75em) calc(var(--y) + .75em)/1.5em 1.5em fixed no-repeat;
mix-blend-mode:difference;
pointer-events: none;
}
https://developer.mozilla.org/en-US/docs/Web/CSS/pointer-events
关于javascript - 如何制作不阻止链接的 CSS 元素，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/55248474/