css改变鼠标形状

2017/10/29 22:41:37Chixm72 阅读0 点赞10 评论

原理其实就是一段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代码,如果是添加到页面中的请添加

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

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

评论区

  • 王光卫博客
    #4
    王光卫博客2017/11/2 10:04:44

    这种前端的必须学习

    • xiaomo
      #1
      xiaomo2017/11/2 16:42:35
  • 穿山丁
    #3
    穿山丁2017/11/1 23:40:24

    输评论名称邮箱网址已经够麻烦了,为什么还要验证码… [koubi]

    • xiaomo
      #1
      xiaomo2017/11/1 23:41:15
    • 穿山丁
      #2
      穿山丁2017/11/1 23:47:44

      @xiaomo 邮件模板的第一个title没有a锚点

    • xiaomo
      #3
      xiaomo2017/11/2 16:43:48

      @穿山丁 对,title没有a锚点,一个回复啦,要那么多锚点干什么, [xieyanxiao]

  • 轩陌
    #2
    轩陌2017/11/1 21:51:37

    可以

    • xiaomo
      #1
      xiaomo2017/11/1 21:53:13

      @轩陌 是嘛,我也觉得这鼠标样式挺不错的 [xieyanxiao]

  • 初夏
    #1
    初夏2017/10/30 13:34:57

    大佬 [baoquan]

    • xiaomo
      #1
      xiaomo2017/10/31 13:17:04