自定义网页鼠标样式
本文由 小茗同学 发表于 2016-08-02 浏览(992)
最后修改 2016-08-02 标签:自定义 鼠标 指针 样式 cursor

原文发表于2014-07-17

语法

element {cursor: url('cur图片的绝对路径'), 图片不存在时的默认鼠标样式;}

说明:

  1. 必须是绝对路径;
  2. 默认样式必须写,如autodefault,中间分隔的是逗号不是空格,否则不会生效;
  3. 图片最好是.cur后缀的,其它格式不敢保证多浏览器支持;
  4. 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>

效果: