gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-11-28 19:16:08 25 4
gpt4 key购买 nike

我想在悬停链接上有一个更大的实心圆圈。例如 (".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>

最佳答案

当浏览器通过 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>

关于jquery - 悬停时更改自定义鼠标,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58276426/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com