Изменить пользовательскую мышь при наведении - PullRequest
Новая
       37

Изменить пользовательскую мышь при наведении

1 голос
/ 07 октября 2019

Я хотел бы иметь больший и заполненный круг на ссылке при наведении курсора. (".cursor - canvas") и измените форму ".cursor - small" с круга на треугольник для примера.

МОЙ JS FIDDLE ЗДЕСЬ 

  <!-- The cursor elements --> 
  <div class="cursor cursor--small"></div>
  <canvas class="cursor cursor--canvas" resize></canvas>

  <a class="link" href="#">HELLO ! </a>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/paper.js/0.12.0/paper-core.min.js"></script>

1 Ответ

0 голосов
/ 08 октября 2019

Вы, вероятно, слишком усложняете ситуацию, если самостоятельно внедряете курсор в JavaScript, когда браузер предоставляет удобный способ сделать это через свойство CSS cursor. Если у вас есть изображение (встроенный или отдельный файл) для использования в качестве курсора, вы можете просто использовать: 

cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="50" height="50" viewBox="0 0 20 20"><path fill="none" stroke="%23000000" d="M11 10a1 1 0 01-1 1 1 1 0 01-1-1 1 1 0 011-1 1 1 0 011 1zm8 0a9 9 0 01-9 9 9 9 0 01-9-9 9 9 0 019-9 9 9 0 019 9z"/></svg>'), auto;

для определения пользовательского курсора для этого элемента.

Пример использования другогокурсоры для разных элементов показаны ниже: 

#back {
    padding: 70px 20px;
    background-color: #ccc;
    cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="50" height="50" viewBox="0 0 20 20"><path fill="none" stroke="%23000000" d="M11 10a1 1 0 01-1 1 1 1 0 01-1-1 1 1 0 011-1 1 1 0 011 1zm8 0a9 9 0 01-9 9 9 9 0 01-9-9 9 9 0 019-9 9 9 0 019 9z"/></svg>') 25 25, auto;
}
h1 {
    padding: 20px;
    background-color: green;
    cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="50" height="50" viewBox="0 0 20 20"><path fill="none" stroke="%23000000" d="M10 2L2 18h16z"/></svg>') 25 25, auto;
}
<div id="back">
    <h1>Triangle cursor in here!</h1>
</div>
...