网页修改鼠标样式为图片

最新推荐文章于 2024-07-11 10:08:53 发布

英雄梦想7

最新推荐文章于 2024-07-11 10:08:53 发布

阅读量6.1k

点赞数 7

分类专栏： HTML/Css

本文链接：https://blog.csdn.net/hyhlove/article/details/12235609

版权

HTML/Css 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

一直嫌弃自己网页的鼠标没有创意，就研究了一下鼠标样式，试着让它变成好看的图片。

代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type content="text/html; charset=utf-8" />
<title>网页修改鼠标样式为图片</title>
<style type="text/css">
body{width:240px;
     height:240px;
     border:1px #369 solid;
     cursor:url('i/2.cur'),auto;
     }
</style>
<body>
网页修改鼠标样式为图片
</body>
</html>

一、cursor存在的属性中，必须指定固定的width和height否则没有效果。
二、cursor属性中的url（值），图片的格式根据不同的浏览器来分；
        IE支持cur，ani，ico，这几种格式。
        Firefox支持bmp，jpg，gif，cur，ico，这几种格式，不支持ani这种格式。
三、图片大小最好是32*32的大小。
四、Css中的cursor属性不仅仅需要将url（）书写正确，还需要填写一个备用样式。  cursor:url('图片地址'),备用选项;。缺一不可。
五、其他问题：

<1>各浏览器间鼠标图片大小不一致问题：

这种问题应该和各浏览器间对Cursor图片的解析有关系，起初我的鼠标图片大小是59*56的，后来把鼠标图片的尺寸改为32*32后，图片大小不一致的问题就解决了。

(经测试发现，超过32*32尺寸，就会出现这种问题)
<2>IE中使用Cursor URL()出现鼠标闪动问题：

当对设置Cursor URL()的容器元素添加了Title或Alt时，就会出现这种现象。最后很无奈的把Title标签去掉了。难道是因为在IE中Cursor会和Title、Alt冲突么？

附录：

1、cursor其它值

值	描述
url	需使用的自定义光标的 URL。注释：请在此列表的末端始终定义一种普通的光标，以防没有由 URL 定义的可用光标。
default	默认光标（通常是一个箭头）
auto	默认。浏览器设置的光标。
crosshair	光标呈现为十字线。
pointer	光标呈现为指示链接的指针（一只手）
move	此光标指示某对象可被移动。
e-resize	此光标指示矩形框的边缘可被向右（东）移动。
ne-resize	此光标指示矩形框的边缘可被向上及向右移动（北/东）。
nw-resize	此光标指示矩形框的边缘可被向上及向左移动（北/西）。
n-resize	此光标指示矩形框的边缘可被向上（北）移动。
se-resize	此光标指示矩形框的边缘可被向下及向右移动（南/东）。
sw-resize	此光标指示矩形框的边缘可被向下及向左移动（南/西）。
s-resize	此光标指示矩形框的边缘可被向下移动（北/西）。
w-resize	此光标指示矩形框的边缘可被向左移动（西）。
text	此光标指示文本。
wait	此光标指示程序正忙（通常是一只表或沙漏）。
help	此光标指示可用的帮助（通常是一个问号或一个气球）。