前言:今天看百度的一个layui前端框架的时候,看到一个禁用图标的样式,鼠标移上去会变成一个自定义的图片样式,就在想难道cursor也可以自定义图片路径?!之前一直没有使用过。

使用了一下之后,遇到很多问题,比如图片的格式,后缀名以及大小等问题,然后查了一下相关资料。

语法:cursor:url(路径),auto;

auto是需要跟的标准样式,浏览器会先加载你设定好的路径,如果没有,则加载auto里自定义的,auto,default等都可以。

关于图片的格式:

1,如果用图片(gif,png)等,不能超过32*32,否则浏览器不认识

2,IE浏览器不认识gif,png等的图片格式

3,firefox等标准浏览器不支持.ani格式。

4.firefox等标准浏览器好像也不支持动画效果的.cur文件。

5、鼠标样式文件一般是.cur .ani格式。IE都支持

当然用jquery也可以实现:

$(document).ready(function(){

$('mouse').hover(

    function(){$this.css({cursor:"url(cvte.cur),auto"})},

    function(){$this.css({cursor:"url(),auto"})})

})

<div class="mouse"></div>

原来cursor:可以这样改变鼠标样式的更多相关文章

  1. 【问题】js 改变鼠标样式,chrome浏览器不能立即更新,暂没有解决办法

    元素的css,cursor可以改变鼠标样式.也就是鼠标放到元素上去时,改变为相应状态. 通过JS改变cursor时,我发现chrome浏览器不能立即更新,需要动一下鼠标才行,试了几个其它浏览器都是立即 ...

  2. unity 改变鼠标样式的两种方法

    1.第一个直接改变鼠标样式 public var cursorTexture:Texture2D; private var changeFlag = false; function Update(){ ...

  3. Unity编辑器 - 鼠标悬停在控件上时改变鼠标样式

    Unity编辑器 - 鼠标悬停在控件上时改变鼠标样式 摘自Unity文档 EditorGUIUtility.AddCursorRect public static void AddCursorRect ...

  4. JS 改变鼠标样式

    此片记录如何改变鼠标样式: document.body.style.cursor = "url(resource/pic/icons/magnifier3.cur) 12 12,crossh ...

  5. C\C++改变鼠标样式

    改变鼠标样式可以使用SetClassLong函数 HCURSOR hcur = LoadCursor(NULL, IDC_CROSS); //加载系统自带鼠标样式 HWND hwnd = GetHWn ...

  6. Unity发布WebGL改变鼠标样式

    记录:前段时间遇到一个需求,就是打包出来要在某种情况下鼠标的样子要改变成想要的样式. 详细代码如下 public Texture2D[] hand;//小指图标 /// <summary> ...

  7. Web前端:改变鼠标样式

    <span style="cursor:auto">浏览器设置的光标</span><br /> <span style="cur ...

  8. 【HTML】改变鼠标样式图片css

    你需要一张图   .ico 的 格式 如果一开始你要解决的是怎么去用png 格式图片转成 ICO格式 先做一张32*32的PNG格式图片 然后 打开http://www.easyicon.net/co ...

  9. C#开发分享:如何改变系统鼠标样式

    开发过程中发现需要用到改变鼠标样式(就是光标的样子),但是在网上找了很多资料,都是介绍在程序中使用,我需要的效果时在系统级使用.现在找到了,分享给大家. [DllImport("user32 ...

随机推荐

  1. java基础类型、包装器

    char a = 'h';  //类包装器 Character aobj = a ;//自动装箱 byte b = 6; Byte bobj = b; short s = 234; Short sob ...

  2. Leetcode: Ternary Expression Parser

    Given a string representing arbitrarily nested ternary expressions, calculate the result of the expr ...

  3. GetLastError()函数返回值及含义

    GetLastError返回的值通过在api函数中调用SetLastError或SetLastErrorEx设置.函数并无必要设置上一次错误信息,所以即使一次GetLastError调用返回的是零值, ...

  4. html标签分两种:块状元素和内联元素

      块状元素一般是其它元素的容器,可以容纳内联元素和其它块状元素,独占一行,宽度和高度起作用.如div,p等标签属于块状元素.     内联元素只能容纳文本和其它内联元素,可与其它内联元素位于同一行, ...

  5. 【皇甫】☀ 图_substring

    substring是啥?

  6. gen目录无法更新,或者gen目录下的R.JAVA文件无法生成

    gen目录无法更新,或者gen目录下的R.JAVA文件无法生成 1.gen目录的用处 android gen目录下的R.java并不是由用户创建,而是android工程本身将android的资源进行自 ...

  7. mui小总结

    下拉刷新 第一: mui.init({ pullRefresh: { container: '#pullrefresh', up: { contentrefresh: '正在加载...', callb ...

  8. wex5 实战 框架拓展之1 公共data组件(Data)

    一 前言 wex5作为开发利器,框架本身的集成能力与拓展能力可谓简单强大.在学习过程中,对框架的拓展能力,需要通过实践来丰富.今天,我以实际工作中的实例,先来看一看,框架上的公共data组件的实现与用 ...

  9. linux和windows下的自动ftp脚本(shell bat)

    一.先来看linux下的: 复制代码 代码如下: #! /bin/bashcd /ftp/CURRENTDATE=` date +%Y%m%d `YESTERDAY=` date -d yesterd ...

  10. Hibernate5.1.0的hello word

    新建一个JavaProject(不一定非要web工程) 在工程里面新建一个文件夹lib,用来存放jar包 找到Hibernate的下载文件,解压后找到required文件夹,这是需要的jar包 添加到 ...