原文发表于2014-07-17
语法
element {cursor: url('cur图片的绝对路径'), 图片不存在时的默认鼠标样式;}
说明:
- 必须是绝对路径;
- 默认样式必须写,如
auto
、default
,中间分隔的是逗号不是空格,否则不会生效; - 图片最好是.cur后缀的,其它格式不敢保证多浏览器支持;
- cur图片制作:百度
cur 制作
会出来一个在线制作工具;
示例
<style type="text/css">
#content_wrapper{
position: absolute;
background: #ddd;
left: 0px;
top: 0px;
width: 400px;
height: 400px;
border: solid 1px #bbb;
}
#cursor_wrapper {
position: absolute;
left: 100px;
top: 100px;
width: 200px;
height: 200px;
background: #999;
color: white;
text-align: center;
cursor: url('http://test.liuxianan.com/sample.cur'), auto;
}
</style>
<div id="content_wrapper">
<div id="cursor_wrapper">
鼠标经过这里将出现自定义指针样式
</div>
</div>
效果: