jquery - 悬停时更改自定义鼠标

Question

我想在悬停链接上有一个更大的实心圆圈。例如 (".cursor--canvas") 并将 ".cursor--small"的形状从圆形更改为三 Angular 形。

MY JS FIDDLE HERE

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

Answer 1

当浏览器通过 CSS cursor 属性提供了一种方便的方法时，您自己使用 JavaScript 实现游标可能会使事情过于复杂。如果您有一个图像(内联或单独的文件)用作光标，您可以简单地使用:

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>