CSS-自定义鼠标图标

html-css032

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: 中文"鼠标"的意思.