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

Sorawithcat · 发表于 2024-1-7 16:28:10

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

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

x

因为没权限上传url属性，所以代码发不了，想问一下如果设置了

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部分：

<div class="custom-cursor"></div>

CSS部分：

.custom-cursor {
  position: fixed;
  top: 0;
  left: 0;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: red;
  pointer-events: none;
}

JavaScript部分：

var cursorDiv = document.querySelector('.custom-cursor');

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

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

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

document.getElementById("option3").addEventListener('change', function() {
  cursorDiv.style.backgroundColor = "green";
});

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

以上回复来自 FishC AI 小助理，如未能正确解答您的问题，请继续追问。

跳转到最佳答案楼层

FishC · 发表于 2024-1-7 16:28:27

鼠标的难以点击和选择是因为当你将borderRadius属性设为0%时，鼠标指针所处的位置与实际显示的位置并不完全一致。

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

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

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

<!DOCTYPE html>
<html>
<head>
<style>
.custom-cursor {
  width: 20px;
  height: 20px;
  background-color: red;
  border-radius: 50%;
}
</style>
</head>
<body>
<div class="custom-cursor"></div>

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

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

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

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

document.getElementById("option3").addEventListener('change', function() {
    cursorDiv.style.backgroundColor = "green";
});
</script>
</body>
</html>

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

以上回复来自 FishC AI 小助理，如未能正确解答您的问题，请继续追问。

Sorawithcat · 发表于 2024-1-7 16:30:46

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

我的div代码也是这样但是如果修改borderRadius的话就会出现问题

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部分：

<div class="custom-cursor"></div>

CSS部分：

.custom-cursor {
  position: fixed;
  top: 0;
  left: 0;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: red;
  pointer-events: none;
}

JavaScript部分：

var cursorDiv = document.querySelector('.custom-cursor');

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

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

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

document.getElementById("option3").addEventListener('change', function() {
  cursorDiv.style.backgroundColor = "green";
});

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

以上回复来自 FishC AI 小助理，如未能正确解答您的问题，请继续追问。

账号		自动登录	找回密码
密码			立即注册