CSS-自定义鼠标图标

html-css023

CSS-自定义鼠标图标,第1张

解析：前面的url是自定义鼠标图标的路径，可以为相对/绝对路径。第二个参数是css标准的cursor样式。可换成其他属性（如pointer/crosshair/default/等）

注意：w3school推荐第二个参数必须定义一个普通的光标，以防止url定义的光标有备用选项。另外，IE下第二个参数可以省略。

自定义鼠标图标，需要注意以下几点:

① 图标的格式

IE支持cur,ani,ico这三种格式，FF支持bmp,gif,jpg,cur,ico这几种格式，不支持ani格式，也不支持gif动画格式，因此一般将url引用的图标存为ico或cur格式比较好。

② 图标的大小

鼠标图标的尺寸推荐32*32，否则可能出现大小不一致问题。

参考文章： 使用自定义的鼠标图标

1、假设图片外层DIV的class为pic，图片的大小是400*300，html代码可以写成下面这样:

<divclass="pic">

<imgsrc="abc.jpg"width="400"height="300"/>

</div>

2、如果希望鼠标经过时图片的尺寸变成600*450，那么在css里面只要这样定义就行了:picimg:hover{width:600pxheight:450px}

3、这个代码在ie6下会不生效，因为ie6不支持除A标签外的其他元素的:hover伪类。如果要在ie6下兼容，只需要把div改成a标签，也就是在图片上加一个超链接，然后给它加上一个class即可。

鼠标

鼠标是计算机的一种输入设备，分有线和无线两种，也是计算机显示系统纵横坐标定位的指示器，因形似老鼠而得名"鼠标"(港台作滑鼠)。

CSS完全可以做到啊

cursor -- 定义鼠标样式

<style="cursor:url('鼠标图片的网址')">

*{crusor:url('鼠标图片的网址')}

详细介绍：

取值: [ [<uri>,]* [ auto | crosshair | default | pointer | move | e-resize | ne-resize | nw-resize | n-resize | se-resize | sw-resize | s-resize | w-resize | text | wait | help | progress ] ] | inherit

[<uri>,]*: 根据用户定义的资源显示

auto: 正常鼠标

crosshair: 十字鼠标

default: 默认鼠标

pointer: 点状鼠标

move: 移动鼠标

e-resize,ne-resize,nw-resize,n-resize,se-resize,sw-resize,s-resize,w-resize: 改变大小鼠标

text: 文字鼠标

wait: 等待鼠标

help: 求助鼠标

progress: 过程鼠标

inherit: 继承

引用网址:http://www.dreamdu.com/css/property_cursor/

初始值: auto

继承性: 是

适用于: 所有元素

cursor: 中文"鼠标"的意思.