Question

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

这是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; 
}

这是HTML标记：

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

如何使我的自定义光标在整个页面中都可见，就像默认光标一样？

Answer 1

如果您需要在整页上显示custom cursor，则必须像这样添加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;
}

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

注意：如果您在IE中也需要它，那么您必须使用游标.cur文件扩展名。

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

1 个答案: