1

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

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

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

введите сюда описание изображения

1 ответ 1

5

(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>

9
  • То что я и хотел,но возможно ли это показать без jquery? На чистом js?) Буду очень благодарен) Чистый js более понимаю
    – user294431
    1 окт 2018 в 7:25
  • Хороший вариант. Только события нажатия срабатывать не будут) 1 окт 2018 в 7:35
  • @StepanKasyanenko почему же?
    – Randall
    1 окт 2018 в 19:05
  • @Demon__ANTпотому что под мышкой находится div.mouse-circle. И все события нажатия срабатывают на него. Попробуйте "отжать" кнопку Записать. 2 окт 2018 в 3:47
  • @StepanKasyanenko достаточно для .mouse-circle добавить свойство pointer-events:none. Тогда не будут учитываться клики в этот блок. 2 окт 2018 в 7:03

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.