Как лучше сделать подсветку курсора?

214

04 апреля 2018, 09:57

Возникла потребность сделать как бы подсветку курсора на кнопках. То-бишь, чтоб когда провожу им по кнопке, то под курсором был какой-то градиент, фон, кружок.. что- не очень важно.

Вопрос вот в чём: как это лучше реализовать? Перемещать что-то на самом фоне кнопки или просто создать прозрачный блок с бекграундом и перемещать уже его?

Answer 1

Самое простое - нарисовать png-шку и подменять ею внешний вид курсора при ховере на кнопке

button { 
 padding: 5px; 
} 
 
button:hover { 
  cursor: url("https://i.stack.imgur.com/QRS91.png"), default; 
}

<button> 
КНОПКА 
</button>

Answer 2

Мы не ищем лёгких путей!

var curBg = document.querySelectorAll('.cur-bg'), 
  mouseBg = document.getElementById('mouse-bg'); 
 
for (var i = 0; i < curBg.length; i++) { 
  curBg[i].addEventListener('mousemove', foo, false); 
  curBg[i].addEventListener('mouseleave', boo, false) 
} 
 
function foo(event) { 
 
  mouseBg.style.display = 'block'; 
  mouseBg.style.left = event.clientX + 'px' 
  mouseBg.style.top = event.clientY + 'px' 
} 
 
function boo() { 
  mouseBg.style.display = 'none'; 
}

  #mouse-bg { 
  width: 15px; 
  height: 15px; 
  border-radius: 8px; 
  background: linear-gradient(270deg, #41bd9d, #d72222); 
  background-size: 400% 400%; 
  display: none; 
  position: absolute; 
  pointer-events: none -webkit-animation: AnimationName 1s ease infinite; 
  -o-animation: AnimationName 1s ease infinite; 
  animation: AnimationName 1s ease infinite; 
} 
 
@-webkit-keyframes AnimationName { 
  0% { 
    background-position: 0% 50% 
  } 
  50% { 
    background-position: 100% 50% 
  } 
  100% { 
    background-position: 0% 50% 
  } 
} 
 
@-o-keyframes AnimationName { 
  0% { 
    background-position: 0% 50% 
  } 
  50% { 
    background-position: 100% 50% 
  } 
  100% { 
    background-position: 0% 50% 
  } 
} 
 
@keyframes AnimationName { 
  0% { 
    background-position: 0% 50% 
  } 
  50% { 
    background-position: 100% 50% 
  }

<input class="cur-bg" type="button" value="button" /> 
<button class="cur-bg">button</button> 
<span class="cur-bg">button</span> 
 
<div id="mouse-bg"></div>