Подсветка курсора по клику

185

23 января 2019, 06:30

Всем привет, у меня есть вот такая вот кнопка:

 <div class="recordPanel">
        <span>Записать</span>
    </div>

Как сделать, чтобы при клике на кнопку курсор становился, как на картинке(только без замены курсора картинкой), а при клике на другую картинку возвращался обратно.

Answer 1

(function() { 
    $(".recordPanel").click(function() 
    { 
      $(".recordPanel").toggleClass("recording"); 
    }); 
 
    function isRecording() 
    { 
      return $(".recordPanel").hasClass("recording"); 
    } 
    document.onmousemove = handleMouseMove; 
    function handleMouseMove(event) { 
        if (isRecording()) 
        { 
          $(".mouse-circle").css("display", "block"); 
          $(".mouse-circle").css("left", event.pageX - 30/2+5); 
          $(".mouse-circle").css("top", event.pageY - 30/2+5); 
        } 
        else 
        { 
          $(".mouse-circle").css("display", "none"); 
        } 
    } 
})();

.mouse-circle 
{ 
  width:30px; 
  height:30px; 
  border-radius:100%; 
  box-shadow: 0 0 0 3px rgba(0,145,255, 0.3); 
  background: rgb(0,145,255); 
  display:none; 
  position:absolute; 
  pointer-events:none; 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous"> 
<div class="mouse-circle"><i class="fa fa-cursor"></i></div> 
  
 <div class="recordPanel"> 
        <span>Записать</span> 
 </div>