Пользовательский курсор является пиксельным на Windows ОС - PullRequest
Новая
       5

Пользовательский курсор является пиксельным на Windows ОС

4 голосов
/ 07 апреля 2020

Я реализовал пользовательский курсор, но он выглядит пиксельным (особенно разрешение 1366 * 768) на Windows Chrome (не проверял на Ma c OS). Вы можете увидеть фрагмент кода здесь: 

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Untitled</title>
    <meta name="description" content="This is an example of a meta description.">
    <style>
        body {
            cursor: -webkit-image-set( url("https://i.imgur.com/gbSYdYW.png") 1x, url("http://i.imgur.com/vf3qXmT.png") 2x) 0 0, auto;
        }
    </style>
  </head>
  <body>
    Testing
  </body>
</html>

Также я изменил png на изображение SVG, но безуспешно. Любое предложение будет оценено.

Пожалуйста, найдите фрагмент стека для того же: 

 body {
            width: 999px;
            height: 500px;
            cursor: -webkit-image-set( url("https://i.imgur.com/gbSYdYW.png") 1x, url("http://i.imgur.com/vf3qXmT.png") 2x) 0 0, auto;
        }
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Untitled</title>
    <meta name="description" content="This is an example of a meta description.">
  </head>
  <body>
    Testing
  </body>
</html>

Ответы [ 3 ]

1 голос
/ 08 апреля 2020 

body{

  width: 600px;
  height: 500px;
cursor:-webkit-image-set( url(http://www.ivank.net/veci/crosshair.png) 5x  ) 40 40, auto;
}
<body style="">

-webkit-image-set( url(http://www.ivank.net/veci/crosshair.png) 5x  ) 40 40, auto;

</body>

Я нашел еще одно решение, которое работает нормально, как вам требуется:

http://www.ivank.net/veci/cursors_dpr.html

Посмотрите.

Я не уверен, как работает Cursor image-set, но я сомневаюсь, что он не работает с абсолютным URL, по моим наблюдениям, image-set URL работает со стати c URI. Но я попытался изменить Stati c URI с помощью Absolute URL, и он тоже хорошо работал.

Пожалуйста, посмотрите, это может помочь вам больше.

PS: image URL http://www.ivank.net/veci/crosshair.png

0 голосов
/ 07 апреля 2020

хорошо, это другой подход к использованию пользовательского курсора 

// find elements
$(function () {
  $("#testarea").mousemove(function (e) {
    $(".cursor").show().css({
      "left": e.clientX,
      "top": e.clientY
    });
  }).mouseout(function () {
    $(".cursor").hide();
  });
});
#testarea {
  border: 1px dashed #ccc;
  height: 100px;
  cursor: none;
}
.cursor {
  position: absolute;
  width: 25px;
  height: 25px;
  left: -100px;
  cursor: none;
  pointer-events: none;
}
<script src="https://code.jquery.com/jquery-2.2.4.js"></script>
<div id="testarea"></div>
<img src="https://i.imgur.com/gbSYdYW.png" alt="Cursor" class="cursor" />
0 голосов
/ 07 апреля 2020

Хорошо, попробуйте это, у меня все работает нормально.

Реализация курсора в css может быть выполнена следующим образом 

cursor: url("http://i.imgur.com/vf3qXmT.png"), url("http://i.imgur.com/vf3qXmT.png"), default;

Не так: 

    cursor: -webkit-image-set( url("https://i.imgur.com/gbSYdYW.png") 1x, url("http://i.imgur.com/vf3qXmT.png") 2x) 0 0, auto;

Посмотрите на следующий фрагмент кода. 

    
 body {
            width: 999px;
            height: 500px;
cursor: url("http://i.imgur.com/vf3qXmT.png"), url("http://i.imgur.com/vf3qXmT.png"), default;
        }
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>CSS Custom Cursor</title>
</head>
<body>

</body>
</html>
...