Как изменить курсор на несколько указателей мыши - PullRequest
Новая
       48

Как изменить курсор на несколько указателей мыши

0 голосов
/ 02 июня 2018

Я пытаюсь изменить курсор на разные изображения в зависимости от объекта, который он нависает над моим баннером.В настоящее время я знаю только, чтобы изменить стиль курсора в CSS.Но курсор остается неизменным во всем.Как заменить изображение курсора при наведении курсора в моем JavaScript?Я использую только JQuery и TweenMax, так как это для назначения.

1 Ответ

0 голосов
/ 02 июня 2018

Использование CSS cursor свойство

Без использования псевдоселекторов в CSS вы можете получить довольно хороший результат, поиграв со свойством cursor.Например, вы можете выбрать один стиль курсора из диапазона доступных .Или даже добавьте свой собственный, указав URL-адрес значка.

Например, приведенный ниже код будет показывать сердце при наведении курсора на серую область: 

.heart {
  cursor: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/9632/heart.png"), auto;
  width: 200px;
  height: 200px;
  background: grey;
}
<div class="heart"></div>

Вы можете изменить исходную позицию изображения относительно фактической позиции мыши, установив позиции x и y вместе с URL-адресом вcursor свойство: 

cursor: url(<URL>) [x y|auto];

Использование JavaScript

Конечно, вы можете справиться с этой функцией с помощью кода JavaScript.Вот несколько вещей, которые нам понадобятся для достижения этой цели:

  • создание элемента HTML с изображением курсора, который вы хотите использовать в качестве фона

  • , используясобытия onmouseenter, onmousemove и onmouseleave

  • , определяющие положение мышина странице: свойства pageX, pageY

  • , устанавливающие положение элемента cursor в положениемышь (фактический указатель мыши будет скрыт): со свойством CSS transform.

Есть несколько других приемов, которые я использовал, чтобы понять это правильно: например, установив переполнение блоков равным hidden, чтобы элементы cursor не были видны за пределами блока.Кроме того, прослушивание события onmouseleave позволяет нам скрыть элемент cursor, когда мышь находится за пределами области окна.

Я сделал небольшую демонстрацию здесь, нажмите Показать фрагмент кода > Фрагмент кода выполнения : 

const showCursor = function(event) {
  let cursor = event.target.querySelector('.cursor');
  
  event.target.onmousemove = function(e) {
    cursor.style.display = 'block'
    let [x, y] = [e.pageX - e.target.offsetLeft - 20, e.pageY - e.target.offsetTop - 20]
    cursor.style.transform = `translate(${x}px, ${y}px)`
  }

  event.target.onmouseleave = function(e) {
    cursor.style.display = 'none'
  }

}
.box {
  cursor: none;
  overflow: hidden;
  width: 200px;
  height: 200px;
  background: pink;
  display: inline-block;
  margin: 10px;
}

.box:nth-child(1) {
  background: aquamarine;
}

.box:nth-child(2) {
  background: pink;
}

.box:nth-child(3) {
  background: cornflowerblue;
}

.box:nth-child(4) {
  background: lightcoral;
}

.cursor {
  display: none;
  width: 100px;
  height: 100px;
}

#heart {
  background: no-repeat url("https://png.icons8.com/color/50/000000/hearts.png");
}

#diamond {
  background: no-repeat url("https://png.icons8.com/color/50/000000/diamonds.png")
}

#spade {
  background: no-repeat url("https://png.icons8.com/metro/50/000000/spades.png")
}

#clubs {
  background: no-repeat url("https://png.icons8.com/ios/50/000000/clubs-filled.png")
}
<div onmousemove="showCursor(event)" class="box">
  <div id="diamond" class="cursor"></div>
</div>
<div onmouseenter="showCursor(event)" class="box">
  <div id="heart" class="cursor"></div>
</div>

<div onmousemove="showCursor(event)" class="box">
  <div id="spade" class="cursor"></div>
</div>
<div onmousemove="showCursor(event)" class="box">
  <div id="clubs" class="cursor"></div>
</div>

Функция showCursor() вызывается, когда мышь пользователя входит в одно из полей с атрибутом onmouseenter="showCursor(event)" (см. Разметку HTML выше).

Ниже я предоставил код JavaScript с комментариями , объясняющий, как это работает: 

const showCursor = function(event) {
  // get the element object of the cursor of this box
  let cursor = event.target.querySelector('.cursor');

  // function that will be execute whenever the user moves inside the box
  event.target.onmousemove = function(e) {
    // the user is moving inside the box

    // show the cursor element
    cursor.style.display = 'block'

    // calcultate the translate values of the cursor element
    let [x, y] = [e.pageX - e.target.offsetLeft - 20, e.pageY - e.target.offsetTop - 20]

    // apply these values to the style of the cursor element
    cursor.style.transform = `translate(${x}px, ${y}px)`

  }

  // function that will be executed when the user leaves the box 
  event.target.onmouseleave = function(e) {
    // the user's mouse left the box area

    // hide the cursor element
    cursor.style.display = 'none'
  }

}

С элементом <svg>

Некоторое время назад я ответил на пост , как добавить элемент <svg> в качестве курсора мыши.Это немного более продвинутый, хотя.Это все еще решение JavaScript, но оно включает в себя использование элемента <svg> в качестве cursor вместо простого <div> (как видно во втором пункте).

...