WordPress美化教程-更改鼠标指针样式

WordPress美化教程-更改鼠标指针样式

看到不少网站是鼠标样式都发生了变化,而作为一个有审美(不一定有审美观)的我来说,又控制不住我自己了,刚设置好,就把教程分享给大家吧。

其实非常非常简单,就是在我们的主题样式文件(多为style.css,很多主题不是这个文件)里添加一小段代码。如果是更改默认的鼠标样式,就在标签“body”里添加,如果是更改链接的鼠标样式,就在“a:hover”里添加,格式如下:

cursor: url(images/鼠标样式图片的名称.cur), auto; //鼠标样式一般都是.cur后缀名

现在以我刚加的为例子,演示给大家看,我的默认鼠标名为“a.cur”,链接鼠标名为“b.cur”,上传到我主题的“img”文件夹了,然后我在主题样式里添加:

/*这是我没有添加鼠标样式之前的*/
body {font-family:'Microsoft Yahei';color:#555;}
a:hover {color:#45b6f7;text-decoration:none;}

/*这是我添加之后的*/
body {font-family:'Microsoft Yahei';color:#555;cursor:url(img/a.cur), auto}
a:hover {color:#45b6f7;text-decoration:none;cursor:url(img/b.cur), auto}

需要注意图标存放的位置,不要调用错了。另外,我附一张从w3school那搞来的关于鼠标css的cursor属性应用,建议大家用“auto”。(PS:鼠标样式到哪里搞,自己百度下载去)

描述
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 此光标指示可用的帮助(通常是一个问号或一个气球)。
(0)

评论抢沙发