I have created a custom cursor that works well in firefox, and chrome, i'm not even wasting my time creating a .cur for IE, but the problem is that my page is built without any sizing because I want things moving based on %'s. The trouble I'm having, is that my cursor only displays on top of area's of content.
我已经创建了一个在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;
}
1 个解决方案
#1
1
Set the cursor property on html instead of body and give html a min-height of 100%.
将光标属性设置为html而不是body,并为html指定最小高度为100%。
#1
1
Set the cursor property on html instead of body and give html a min-height of 100%.
将光标属性设置为html而不是body,并为html指定最小高度为100%。