CSS如何更换鼠标指针图标

CSS如何更换鼠标指针图标:
建议:尽可能的手写代码,可以有效的提高学习效率和深度。
有时候系统自带的鼠标指针不能满足实际需求,这个时候就需要自定义的鼠标指针图标,下面简单介绍一下如何更换鼠标指针。
先看一段代码实例:

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<style type="text/css"> 
html, body{ 
  height:100%; 
  cursor:url("mytest/demo/wait.ani"),default!important; 
} 
</style> 
</head> 
<body> 
  <div>蚂蚁部落</div> 
</body> 
</html>

以上代码为整个页面替换了鼠标指针。同时也可以发现,鼠标指针图片需要特殊格式的图片,比如是.ani和.cur格式的才行。
也可以为指定的地方设置特定的指针。代码如下:

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<style type="text/css">
html, body{
  height:100%;
  cursor:url("mytest/demo/wait.ani"),default!important;
}
div, a{
  display:block;
  border:1px solid red;
  width:100px;
  height:100px;
}
.second{
  cursor:url("mytest/demo/no.cur"),default!important;
}
a:hover{
  cursor:url("mytest/demo/appstarting.ani"),default!important;
}
</style>
</head>
<body>
<div class="first">蚂蚁部落</div>
<div class="second">大家好,欢迎来到蚂蚁部落!</div>
<a href="#">蚂蚁部落</a>
</body>
</html>

原文地址是:http://www.softwhy.com/forum.php?mod=viewthread&tid=4661

更多内容可以参阅:http://www.softwhy.com/divcss/

你可能感兴趣的:(CSS如何更换鼠标指针图标)