Блог

Главная - Вопросы по программированию - Как создать элемент CSS, который не блокирует ссылки

Как создать элемент CSS, который не блокирует ссылки

#javascript #html #css #cursor

#javascript #HTML #css #курсор

Вопрос:

У меня проблема… Я создал пользовательский курсор с элементом 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>

Вуаля!

Ответ №1:

Вам нужно будет установить 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

Комментарии:

1. Большое вам спасибо!