如何使自定义光标显示在整个页面上，而不仅仅是一小部分

I have seen this, but it does not provide any solution to my programming issues: Custom cursor to entire page

我已经看到了这一点,但它没有为我的编程问题提供任何解决方案:自定义光标到整个页面

This is the CSS Markup:

这是CSS标记:

body { 
    height: 100%; width: 100%; padding: 0; margin: 0;
    background: #000 url('http://1hdwallpapers.com/wallpapers/undead_dragon.jpg') no-repeat fixed center; 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover; font-size:12px; font-weight:bold; 
    cursor: url('http://www.rw-designer.com/cursor-view/21962.png'), auto; 
}
div#mask { 
    cursor: not-allowed; 
    z-index: 999; 
    height: 100%; 
    width: 100%; 
}
a:link { 
    color: #ffffff; 
    font-weight: normal; 
    text-decoration: none; 
}
a:visited { 
    color: #ffffff; 
    font-weight: bold; 
    text-decoration: line-through;
}
a:active { 
    color: #F433FF; 
    font-weight: normal; 
    text-decoration: blink; 
}
a:hover { 
    color: #F433FF; 
    font-weight: bold; 
    text-decoration: blink; 
}
#about_me 

div.center {
    margin-left: auto;
    margin-right: auto;
    width: 8em;
}
{ 
    width: 355px; 
    float: right; 
    margin: 20px 0px 0px 0px; 
}
.contentTitle { 
    color: #fff; 
    background: #000; 
}
.contentModule { 
    color: #FF00FF; 
    border: 1px solid transparent; 
    background: transparent; 
    cursor: pointer; 
}
#right_column { 
    float: left; 
    width: 355px; 
    margin: 20px 0 0 20px; 
}
#left_column { 
    width: 210px; 
    margin-bottom: 10px; 
    margin-right: 0px; 
    float: left;
}
#pet_panel  {
    position: absolute;
    top: 80px;
    right: 700px;
    margin-top: 50px; 
    width: 40%; float: left; margin: 0 0 20px 0; 
}
#comment_panel {
    position: absolute;
    top: 700px;
    right: 85px;
    margin-top: 50px; 
}
#tombstone_panel {
    position: absolute;
    top: 30px;
    right: 85px;
    margin-top: 50px; 
}
#user_panel {
    position: absolute;
    top: 30px;
    right: 385px;
    margin-top: 50px; 
}
#wishlist_panel {
    position: absolute;
    top: 250px;
    right: 85px;
    margin-top: 50px; 
}

This is the HTML Markup:

这是HTML标记:

<div id="about_me" class="contentModule">
    <div class="contentTitle">About Me</div>
    <div class="contentModuleI">my tagline </div> 
</div>

What can I do to make my custom cursor visible throughout my page like the default cursor is?

我可以做些什么来使我的自定义光标在整个页面中可见,就像默认光标一样?

1 个解决方案

#1

If you need to display custom cursor on full page you have to add CSS like this. Have a look at DEMO.

如果需要在整页上显示自定义光标,则必须像这样添加CSS。看看DEMO。

body, html 
{ 
height: 100%; 
width: 100%; 
padding: 0; 
margin: 0;
background: #000 url('http://1hdwallpapers.com/wallpapers/undead_dragon.jpg') no-repeat fixed center; 
cursor:url('http://www.rw-designer.com/cursor-view/21962.png'), url('cute25.cur'), help;
}

so here explain how it works; Firefox and chrome are fine with .jpg or .png file extension. But to support in IE need a .cur file extension. You may convert your image into .cur extension. from this online tool.

所以这里解释它是如何工作的; Firefox和Chrome可以使用.jpg或.png文件扩展名。但要在IE中支持需要.cur文件扩展名。您可以将图像转换为.cur扩展名。来自这个在线工具。

Note: If you need it work also in IE then you have to use cursor .cur file extension.

注意:如果您需要它也可以在IE中工作,那么您必须使用cursor .cur文件扩展名。

#1