在做一个自定义鼠标的玩意
因为没权限上传url属性，所以代码发不了，想问一下如果设置了cursor: none;然后当我通过几个单选框改变自定义鼠标形状的时候（其实就是一个div跟着鼠标走，然后改变它的borderRadius属性），这时候设置成100%是没有问题的，但是设置成0%就出问题了，鼠标变的难以点击和选择，这是为什么？可以追问。 鼠标的难以点击和选择是因为当你将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 小助理，如未能正确解答您的问题，请继续追问。 FishC 发表于 2024-1-7 16:28
鼠标的难以点击和选择是因为当你将borderRadius属性设为0%时，鼠标指针所处的位置与实际显示的位置并不完全 ...
我的div代码也是这样但是如果修改borderRadius的话就会出现问题 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 小助理，如未能正确解答您的问题，请继续追问。
页:
[1]