使用CSS样式的自定义光标-html/css-javascript [英] Custom Cursor using CSS styling - html/css - javascript
本文介绍了使用CSS样式的自定义光标-html/css-javascript的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我试图制作一个自定义光标而不上传图像.我希望光标是一个蓝色的小圆圈.目前,我正在尝试将光标的CSS设置为ID.然后,我将内置的CSS光标样式与新的ID相关联:
I'm trying to make a custom cursor without uploading an image.I want the cursor to be a little blue circle. Currently, I'm trying to set the cursor's css as an id. Then I would associate the built in CSS cursor styling with the new id:
.mainbody{
....
cursor:#id?
};
这可能吗?我什至能正确解决这个问题吗?所有帮助表示赞赏.
Is this possible? Am I even going about this correctly? All help appreciated.
推荐答案
如果要使用自定义CSS光标,则需要在标记中添加div,设置其样式,隐藏默认光标并将其移动到鼠标上坐标:
If you want to have a custom CSS cursor, you need to add a div in your markup, style it, hide the default cursor and move it to the mouse coordinates :
$(document).ready(function() {
$(document).on('mousemove', function(e) {
$('#cursor').css({
left: e.pageX,
top: e.pageY
});
})
});
html {
cursor: none;
}
#cursor {
height: 20px;
width: 20px;
border-radius: 20px;
background-color: blue;
position: absolute;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="cursor"></div>
这篇关于使用CSS样式的自定义光标-html/css-javascript的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文