在悬停时更改自定义鼠标

Posted 2023-05-08

【中文标题】在悬停时更改自定义鼠标

【英文标题】：Change a custom mouse on hover

【发布时间】：2020-02-05 03:43:00

【问题描述】：

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

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>

【参考方案1】：

当浏览器通过 CSS cursor 属性提供了一种方便的方法来执行此操作时，您自己使用 javascript 实现光标可能会使事情变得过于复杂。如果你有一个图像（内联或单独的文件）用作光标，你可以简单地使用：

cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg"   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"   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"   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>

【讨论】：

这不是我要找的 :) 这是我用于此自定义鼠标的教程：tympanus.net/codrops/2019/01/31/custom-cursor-effects