设为首页收藏本站
切换到窄版

鱼C论坛

 找回密码
 立即注册
鱼C论坛»论坛 › 技术交流 › Web开发 › 在做一个自定义鼠标的玩意
返回列表 发新帖
查看: 247|回复: 3

[已解决]在做一个自定义鼠标的玩意

[复制链接]
Sorawithcat
发表于 2024-1-7 16:28:10 | 显示全部楼层 |阅读模式

马上注册，结交更多好友，享用更多功能^_^

您需要 登录 才可以下载或查看，没有账号？立即注册

x
因为没权限上传url属性，所以代码发不了，想问一下如果设置了
  1. cursor: none;
复制代码
然后当我通过几个单选框改变自定义鼠标形状的时候（其实就是一个div跟着鼠标走，然后改变它的borderRadius属性），这时候设置成100%是没有问题的，但是设置成0%就出问题了，鼠标变的难以点击和选择，这是为什么？可以追问。
最佳答案
月排行榜 / 总排行榜
FishC
2024-1-7 16:30:59
Sorawithcat 发表于 2024-01-07 16:30
我的div代码也是这样但是如果修改borderRadius的话就 ...


如果修改div的borderRadius属性导致鼠标点击和选择出现问题，可以尝试使用CSS的pointer-events属性来解决。pointer-events属性可以控制元素是否可以成为鼠标事件的目标。将pointer-events属性设置为none，div元素就不会处理任何鼠标事件，而是将其传递给下方的元素。这样可以避免因为borderRadius导致的点击和选择问题。

以下是一个示例代码：

HTML部分：
  1. <div class="custom-cursor"></div>
复制代码


CSS部分：
  1. .custom-cursor {
  2.   position: fixed;
  3.   top: 0;
  4.   left: 0;
  5.   width: 20px;
  6.   height: 20px;
  7.   border-radius: 50%;
  8.   background-color: red;
  9.   pointer-events: none;
  10. }
复制代码


JavaScript部分：
  1. var cursorDiv = document.querySelector('.custom-cursor');

  3. document.addEventListener('mousemove', function(event) {
  4.   // 设置鼠标形状跟随鼠标移动
  5.   cursorDiv.style.left = (event.pageX - 10) + "px";
  6.   cursorDiv.style.top = (event.pageY - 10) + "px";
  7. });

  9. // 在单选框选项改变时设置不同的样式，这里仅作示例
  10. document.getElementById("option1").addEventListener('change', function() {
  11.   cursorDiv.style.backgroundColor = "red";
  12. });

  14. document.getElementById("option2").addEventListener('change', function() {
  15.   cursorDiv.style.backgroundColor = "blue";
  16. });

  18. document.getElementById("option3").addEventListener('change', function() {
  19.   cursorDiv.style.backgroundColor = "green";
  20. });
复制代码


在上述代码中，我们使用CSS的pointer-events属性将鼠标事件禁用了，这样就避免了因为修改borderRadius导致的点击和选择问题。请注意，这种方法只适用于当div元素只用于展示自定义鼠标形状时，并不需要处理鼠标事件的情况。如果需要在div上处理其他鼠标事件，可能需要结合其他解决方案来实现。

以上回复来自 FishC AI 小助理，如未能正确解答您的问题，请继续追问。
想知道小甲鱼最近在做啥？请访问 -> ilovefishc.com
回复

使用道具 举报

FishC
发表于 2024-1-7 16:28:27 | 显示全部楼层
鼠标的难以点击和选择是因为当你将borderRadius属性设为0%时，鼠标指针所处的位置与实际显示的位置并不完全一致。

在默认情况下，鼠标点击的作用区域是以鼠标指针所在位置为中心的一个小区域。当你设置了borderRadius属性为0%时，这个区域就变得非常小，几乎无法点击到。

解决这个问题的方法是使用一个间接的方式来改变鼠标形状，而不直接改变div的borderRadius属性。你可以尝试通过改变div的背景图片或者使用CSS绘制一个具有圆角效果的div，这样可以保持鼠标点击和选择的正常功能。

以下是一个使用CSS绘制圆角效果的示例代码：

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <style>
  5. .custom-cursor {
  6.   width: 20px;
  7.   height: 20px;
  8.   background-color: red;
  9.   border-radius: 50%;
  10. }
  11. </style>
  12. </head>
  13. <body>
  14. <div class="custom-cursor"></div>

  16. <script>
  17. var cursorDiv = document.querySelector('.custom-cursor');

  19. document.addEventListener('mousemove', function(event) {
  20.     // 设置鼠标形状跟随鼠标移动
  21.     cursorDiv.style.left = (event.pageX - 10) + "px";
  22.     cursorDiv.style.top = (event.pageY - 10) + "px";
  23. });

  25. // 在单选框选项改变时设置不同的样式，这里仅作示例
  26. document.getElementById("option1").addEventListener('change', function() {
  27.     cursorDiv.style.backgroundColor = "red";
  28. });

  30. document.getElementById("option2").addEventListener('change', function() {
  31.     cursorDiv.style.backgroundColor = "blue";
  32. });

  34. document.getElementById("option3").addEventListener('change', function() {
  35.     cursorDiv.style.backgroundColor = "green";
  36. });
  37. </script>
  38. </body>
  39. </html>
复制代码


在上述代码中，我们通过CSS绘制了一个圆角效果的div，并设置其初始颜色为红色。通过监听单选框的改变事件，我们可以根据选项的不同来改变div的背景色，从而模拟自定义鼠标的形状。

以上回复来自 FishC AI 小助理，如未能正确解答您的问题，请继续追问。
想知道小甲鱼最近在做啥？请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

Sorawithcat
 楼主| 发表于 2024-1-7 16:30:46 | 显示全部楼层
FishC 发表于 2024-1-7 16:28
鼠标的难以点击和选择是因为当你将borderRadius属性设为0%时，鼠标指针所处的位置与实际显示的位置并不完全 ...

我的div代码也是这样但是如果修改borderRadius的话就会出现问题
想知道小甲鱼最近在做啥？请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

FishC
发表于 2024-1-7 16:30:59 | 显示全部楼层    本楼为最佳答案   
Sorawithcat 发表于 2024-01-07 16:30
我的div代码也是这样但是如果修改borderRadius的话就 ...


如果修改div的borderRadius属性导致鼠标点击和选择出现问题，可以尝试使用CSS的pointer-events属性来解决。pointer-events属性可以控制元素是否可以成为鼠标事件的目标。将pointer-events属性设置为none，div元素就不会处理任何鼠标事件，而是将其传递给下方的元素。这样可以避免因为borderRadius导致的点击和选择问题。

以下是一个示例代码：

HTML部分：
  1. <div class="custom-cursor"></div>
复制代码


CSS部分：
  1. .custom-cursor {
  2.   position: fixed;
  3.   top: 0;
  4.   left: 0;
  5.   width: 20px;
  6.   height: 20px;
  7.   border-radius: 50%;
  8.   background-color: red;
  9.   pointer-events: none;
  10. }
复制代码


JavaScript部分：
  1. var cursorDiv = document.querySelector('.custom-cursor');

  3. document.addEventListener('mousemove', function(event) {
  4.   // 设置鼠标形状跟随鼠标移动
  5.   cursorDiv.style.left = (event.pageX - 10) + "px";
  6.   cursorDiv.style.top = (event.pageY - 10) + "px";
  7. });

  9. // 在单选框选项改变时设置不同的样式，这里仅作示例
  10. document.getElementById("option1").addEventListener('change', function() {
  11.   cursorDiv.style.backgroundColor = "red";
  12. });

  14. document.getElementById("option2").addEventListener('change', function() {
  15.   cursorDiv.style.backgroundColor = "blue";
  16. });

  18. document.getElementById("option3").addEventListener('change', function() {
  19.   cursorDiv.style.backgroundColor = "green";
  20. });
复制代码


在上述代码中，我们使用CSS的pointer-events属性将鼠标事件禁用了，这样就避免了因为修改borderRadius导致的点击和选择问题。请注意，这种方法只适用于当div元素只用于展示自定义鼠标形状时，并不需要处理鼠标事件的情况。如果需要在div上处理其他鼠标事件，可能需要结合其他解决方案来实现。

以上回复来自 FishC AI 小助理，如未能正确解答您的问题，请继续追问。
想知道小甲鱼最近在做啥？请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

返回列表 发新帖
高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

小黑屋|手机版|Archiver|鱼C工作室 ( 粤ICP备18085999号-1 | 粤公网安备 44051102000585号)

GMT+8, 2024-4-29 02:50

Powered by Discuz! X3.4

© 2001-2023 Discuz! Team.

快速回复 返回顶部 返回列表