我已经实现了自定义光标，但它在 Windows Chrome 上看起来像素化（特别是 1366 * 768 分辨率）（没有在 Mac OS 上检查）。你可以在这里看到代码片段：<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>Untitled</title> <meta name="description" content="This is an example of a meta description."> <style> body { cursor: -webkit-image-set( url("https://i.imgur.com/gbSYdYW.png") 1x, url("http://i.imgur.com/vf3qXmT.png") 2x) 0 0, auto; } </style> </head> <body> Testing </body></html>我也将 png 更改为 svg 图像，但没有成功。任何建议将不胜感激。请找到相同的堆栈片段： body { width: 999px; height: 500px; cursor: -webkit-image-set( url("https://i.imgur.com/gbSYdYW.png") 1x, url("http://i.imgur.com/vf3qXmT.png") 2x) 0 0, auto; }<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>Untitled</title> <meta name="description" content="This is an example of a meta description."> </head> <body> Testing </body></html>
3 回答
哈士奇WWW
TA贡献1799条经验 获得超6个赞
body{
width: 600px;
height: 500px;
cursor:-webkit-image-set( url(http://www.ivank.net/veci/crosshair.png) 5x ) 40 40, auto;
}
<body style="">
-webkit-image-set( url(http://www.ivank.net/veci/crosshair.png) 5x ) 40 40, auto;
</body>
我找到了另一种解决方案，它可以正常工作，正如您所需要的：
http://www.ivank.net/veci/cursors_dpr.html
看一看。
我不确定如何Cursor image-set工作，但我怀疑它不能与 absolute 一起工作URL，根据我的观察，image-set URL正在与 static 一起工作URI。但我尝试URI用 Absolute改变静态URL，它也很有效。
请看一下，这可能对您有更多帮助。
PS：图片网址http://www.ivank.net/veci/crosshair.png
青春有我
TA贡献1784条经验 获得超8个赞
好的，这是使用自定义光标的不同方法
// find elements
$(function () {
$("#testarea").mousemove(function (e) {
$(".cursor").show().css({
"left": e.clientX,
"top": e.clientY
});
}).mouseout(function () {
$(".cursor").hide();
});
});
#testarea {
border: 1px dashed #ccc;
height: 100px;
cursor: none;
}
.cursor {
position: absolute;
width: 25px;
height: 25px;
left: -100px;
cursor: none;
pointer-events: none;
}
<script src="https://code.jquery.com/jquery-2.2.4.js"></script>
<div id="testarea"></div>
<img src="https://i.imgur.com/gbSYdYW.png" alt="Cursor" class="cursor" />
潇湘沐
TA贡献1816条经验 获得超6个赞
好的，试试这个，对我来说效果很好。
css中的光标实现可以像以下格式一样完成
cursor: url("http://i.imgur.com/vf3qXmT.png"), url("http://i.imgur.com/vf3qXmT.png"), default;
不像这样：
cursor: -webkit-image-set( url("https://i.imgur.com/gbSYdYW.png") 1x, url("http://i.imgur.com/vf3qXmT.png") 2x) 0 0, auto;
看看下面的代码片段。
body {
width: 999px;
height: 500px;
cursor: url("http://i.imgur.com/vf3qXmT.png"), url("http://i.imgur.com/vf3qXmT.png"), default;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS Custom Cursor</title>
</head>
<body>
</body>
</html>
添加回答
举报
0/150
提交
取消