Question

我已经创建了一个在Firefox和Chrome中运行良好的自定义光标，我甚至没有浪费时间为IE创建.cur，但问题是我的页面是在没有任何大小的情况下构建的，因为我希望移动的东西基于％的。我遇到的麻烦是，我的光标只显示在内容区域的顶部。

 <!DOCTYPE html>
<html>
<head>
    <title>Home</title>
    <link rel="stylesheet" type="text/css" href="../css/basic.css">
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>
<body>
    <div>
        <img src="../img/s_logo.png" id="logo">
    </div>
    <div class="big_center">
        <img src="../img/b_logo.png" >
        <div id="nav">
            <ul>
                <li><a href="portrait.html">PORTRAIT</a></li>
                <li><a href="commercial.html">COMMERCIAL</a></li>
                <li><a href="fineart.html">FINE-ART</a></li>
            </ul>
        </div>
    </div>
    </body>
</html>

body{
    background-color: black;
    cursor: url(../img/cursor.png),auto;

  }




#logo{
    position:absolute;
    left:0px;
    top:0px;
    z-index:100;
    margin:0;   
    padding: 0px;
    padding-left:20px;
    padding-top:20px;
}
.big_center{
    position: fixed;
    top: 50%;
    left: 50%;
    margin-top: -280px;
    margin-left: -285px;
    text-align: center;
}

#nav{
    position: relative;
    top:-385px;
    left:-24px;

}
#nav ul{list-style-type: none;}

#nav a{
    text-decoration: none;
    font-family:"Century Gothic";
    font-size:50px;
    font-weight:bold;
    line-height:120%;
    color:rgb(255,255,255);
    text-align:center;
    list-style-type: none;
}
#nav a:hover{
    font-family:"Century Gothic";
font-size:58px;
font-weight:bold;
line-height:106%;
color:black;
text-align:center;
/* Firefox v4.0+ , Safari v5.1+ , Chrome v10.0+, IE v10+ and by Opera v10.5+ */
text-shadow:2px -2px 0px rgb(255,102,0);
-ms-filter:"progid:DXImageTransform.Microsoft.dropshadow(OffX=2,OffY=-2,Color=#ffff6600,Positive=false)";zoom:1;
filter:progid:DXImageTransform.Microsoft.dropshadow(OffX=2,OffY=-2,Color=#ffff6600,Positive=false);
}

#nav a:active{
    text-decoration: none;
    font-family:"Century Gothic","applegothic";
    font-size:58px;
    font-weight:bold;
    line-height:106%;
    color:rgb(255,102,0);
    text-align:center;
    list-style-type: none;
}

Answer 1

将光标属性设置为html而不是body，并为html指定最小高度为100％。

整页的自定义css游标，而不仅仅是内容

1 个答案: