测试环境是chrome浏览器

Mozilla/5.0 (Windows NT 6.1) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/43.0.2357.132 Safari/537.36

css样式

div
{
  cursor:url('1.jpg'),pointer;
}

HTML

<body>
  <div style="width:100px;height:100px;background-color:red;"></div>

</body>

当鼠标放到div上,光标会变成你指定的图案

*注意事项

要确保自定义的图片足够小,这里的是16*16

不同浏览器支持的图片格式不一样,请自行查找

cursor:url('1.jpg'),pointer;这里的1.jpg要和当前html文件在同级目录,pointer是必要的,当自定义的图片不能应用时采用的备用方案,本次测试不写是不对的。

CSS使用自定义光标样式-遁地龙卷风的更多相关文章

  1. 「HTML+CSS」--自定义按钮样式【002】

    前言 Hello!小伙伴! 首先非常感谢您阅读海轰的文章,倘若文中有错误的地方,欢迎您指出- 哈哈 自我介绍一下 昵称:海轰 标签:程序猿一只|C++选手|学生 简介:因C语言结识编程,随后转入计算机 ...

  2. [HTML/CSS]uploadify自定义按钮样式

    概述 在项目中经常用到uploadify上传插件,但是FLASH按钮的外观往往跟我们网页的设计的主题色不太搭配.这时就需要对其样式进行修改. 样式文件是uploadify.css. 打开这个文件后,你 ...

  3. Android 自定义光标样式

    今天自定义光标,自己切图,不过怎么切都是很宽.不是一个很细的条.我用ps花了一个像素的直线,放上去还是不行.后来在网上找到方法,那就是用shape.不得不说,shape真的是太吊了. 给EditTex ...

  4. CSS伪选择器的使用-遁地龙卷风

    分为伪元素选择器和伪类选择器两种,前者两个冒号,后者一个冒号,但是浏览器都看做一个冒号 1.a.::first-line 逐层匹配,直到有文本元素且结束改行为止 设置css属性word-break:b ...

  5. 【CSS】自定义checkbox样式

    修改原生checkbox样式. 效果 原理 1.利用CSS3属性 appearance. 该属性(强制)更改(改变)默认(原生)样式. Firefox 支持替代的 -moz-appearance 属性 ...

  6. CSS 之自定义滚动条样式

    ::-webkit-scrollbar {/*滚动条整体样式*/ width: 5px; /*高宽分别对应横竖滚动条的尺寸*/ height: 1px; } ::-webkit-scrollbar-t ...

  7. pixi.js 自定义光标样式

    pixi 介绍 Pixi是一个超快的2D渲染引擎,通过Javascript和Html技术创建动画或管理交互式图像,从而制作游戏或应用. 项目地址:https://github.com/pixijs/p ...

  8. 「HTML+CSS」--自定义按钮样式【001】

    前言 Hello!小伙伴! 首先非常感谢您阅读海轰的文章,倘若文中有错误的地方,欢迎您指出- 哈哈 自我介绍一下 昵称:海轰 标签:程序猿一只|C++选手|学生 简介:因C语言结识编程,随后转入计算机 ...

  9. 「HTML+CSS」--自定义按钮样式【003】

    前言 Hello!小伙伴! 首先非常感谢您阅读海轰的文章,倘若文中有错误的地方,欢迎您指出- 哈哈 自我介绍一下 昵称:海轰 标签:程序猿一只|C++选手|学生 简介:因C语言结识编程,随后转入计算机 ...

随机推荐

  1. Docker探索系列1之docker入门安装与操作

    preface docker这种时髦的技术我接触的比较晚,如果不是公司在使用这项技术,估计还得会更晚接触.好了,说下我司现在docker使用的情况.docker在我司是用来跑web服务的,里面的web ...

  2. Oracle开发常用函数与存储过程

    create or replace function Fuc_Get_AuthorName(RecID_In in varchar2, AdmID_In in varchar2) return var ...

  3. spring-boot-note

    1 java配置和注解配置相结合,不需要任何的xml配置即可 2 spring tool suite 3 src/main/resources/banner.txt http://patorjk.co ...

  4. Python + OpenCV2 系列:1 - 配置

    Python+OpenCV2+Eclipse+Windos 8.1(32bits): 最初的目的是做图像处理,opencv强大的社区支持,让我想从matlab转到opencv框架下进行试验,而Pyth ...

  5. 项目管理知识框架PMBOK(文字版)

    项目管理知识框架PMBOK   项目整体管理[I](Integration) 1. 制定项目章程(Develop Project Charter) 2. 制定项目初步范围说明书(Develop Pre ...

  6. <?xml version="1.0" encoding="utf-16"?>. use different encoding

    public string Serialize<T>(T serializeClass) { string xmlString = string.Empty; try { if (seri ...

  7. Aspect Oriented Programming using Interceptors within Castle Windsor and ABP Framework AOP

    http://www.codeproject.com/Articles/1080517/Aspect-Oriented-Programming-using-Interceptors-wit Downl ...

  8. tomcat的文件路径 servelet的配置 以及maven中的WEB-INF的路径

    Tomcat JavaWeb应用的组成结构 开发JavaWeb应用时,不同类型的文件有严格的存放规则,否则不仅可能会使web应用无法访问,还会导致web服务器启动报错 WebRoot →Web应用所在 ...

  9. Python开发【第十九篇】:Python操作MySQL

    本篇对于Python操作MySQL主要使用两种方式: 原生模块 pymsql ORM框架 SQLAchemy pymsql pymsql是Python中操作MySQL的模块,其使用方法和MySQLdb ...

  10. Druid使用起步—在javaWeb项目中配置监控 连接池

    当我们在javaWEB项目中使用到druid来作为我们的连接池的时候,一定不会忘了添加监控功能.下面我们就来看一下,在一个简单的web项目中(尚未使用任何框架)我们是如果来配置我们的web.xml来完 ...