邮件评论回复又挂了~

MENU

css改变鼠标形状

November 13, 2017 • 实用技巧

原理其实就是一段CSS代码,定义了一下光标,使他不再使用本地的光标!改变鼠标指针形状的方法:系统鼠标指针与自定义控件,一般我们都用系统鼠标指针,其实这已经能满足大部分群众了,通常只有为了页面看起更好看,锦上添花才会选择自定义控件。CSS文件只要在页面中引用了就可以,wordpress的直接添加到style.css中即可 ,其他的不知道可直接添加到页面底部!
例如:

a{ cursor:default;}
div{ cursor:url(url图片地址) }

css样式表(加粗为常用):

属性效果
crosshair十字准星
auto自动
default默认(正常选择)
hand、pointer链接选择(手形)
move移动
help帮助
wait等待
text编辑
w-resize水平调整(向左)
e-resize水平调整(向右)
n-resize垂直调整(向上)
s_resize垂直调整(向下)
ne-resize对角线调整(向右上)
sw-resize对角线调整(向左下)
se-resize对角线调整(向右下)
nw-resize对角线调整(向左上)
url(‘光标地址’)自定义光标

好了,直接上一段CSS代码,如果是添加到页面中的请添加<style> </style>

body {
    cursor: url(光标文件.cur), auto;
}
a:hover {
    cursor: url(光标文件.cur), auto;
}

body的为全局默认光标 a:hover的则为a标签时 使用的样式,就这么简单。

本文转自陌上花

Archives QR Code
QR Code for this page
Tipping QR Code
Leave a Comment

2 Comments
  1. 挺齐全的,博主也好人啊!不过有一点,a就可以,不用带伪类(也可以设置两种情况);也不一定.cur文件,其实.ico也是可以用的啊。我是不是有点话多了(不要打我)... @(委屈)

    1. @宅小猫哎呦,我咋没想到。感谢大佬提醒#(中枪)