CSS自定义鼠标指针样式「建议收藏」

CSS自定义鼠标指针样式「建议收藏」还记得Web1.0时代的那些苦逼岁月吗?你想尽一切办法来优化你的网站.还要饱受IE6惨无人道的虐待,举个栗子,IE中那些害死人不偿命的滚动条,我一直记得第三方类库CometCursor.CometCursor非常强悍,主要用来创建和加载自定义鼠标光标样式。现在可能你会觉得当初的那些实现手段特别老土,但有时又确实需要定制一下光标图案,那么一起来看看CSS怎么实现吧,It’sSoEasy,哪里不会点哪里!

大家好,又见面了,我是你们的朋友全栈君。原文链接:
http://davidwalsh.name/css-custom-cursor

Demo地址:
http://davidwalsh.name/demo/css-custom-cursor.php

原文日期: 2014-09-16

翻译日期: 2014-09-17

翻译人员:
铁锚

还记得Web 1.0时代的那些苦逼岁月吗? 你想尽一切办法来优化你的网站. 还要饱受IE6惨无人道的虐待,举个栗子, IE中那些害死人不偿命的滚动条, 我一直记得第三方类库 CometCursor. CometCursor非常强悍,主要用来创建和加载自定义鼠标光标样式。现在可能你会觉得当初的那些实现手段特别老土,但有时又确实需要定制一下光标图案,那么一起来看看CSS怎么实现吧, It’s So Easy, 哪里不会点哪里!

CSS代码

CSS中的 cursor 属性可以用逗号分隔指定一系列的光标项,可以用 url() 来自定义光标的图案:

body {
	cursor: url('some-cursor.ico'), default;
}

在实际应用中, 最好在后面加上后备的原生光标,如
default, 这和设置字体(
font-family)样式是一样的道理。

有一点需要注意,Firefox会将光标裁剪到一个较小的比例, 而Chrome现在支持更大的图标尺寸。

不要犹豫了,在重要的地方加上自定义指针图标吧. 就如在看相册预览时的放大(+)和缩小(-)按钮,你肯定想做得与众不同.

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请联系我们举报,一经查实,本站将立刻删除。

发布者:全栈程序员-站长,转载请注明出处:https://javaforall.net/144069.html原文链接:https://javaforall.net

(0)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

  • 如何清理电脑中c盘的垃圾_计算机基本组成

    如何清理电脑中c盘的垃圾_计算机基本组成系统盘,也就是我们常说的C盘!必须要保持足够的存储空间,才能够确保电脑不会运行卡顿,或者出现一些系统性的问题。其实,我们安装系统的时候,C盘最多也就被占用20G左右的空间。但是C盘作为系统盘,电脑运行时所产生的系统缓存文件、垃圾文件以及程序运行文件等等,都会不断的占用C盘的空间,使得C盘越来越小,电脑越用越卡!今天大白菜就和大家分享4招c盘清理方法,让大家的C盘可以腾出更多的空间,保证电脑运行更加…

    2022年8月31日
    3
  • 【linux命令】 tree命令

    【linux命令】 tree命令文章目录Tree命令安装方法一,yum安装方法二,源码安装Tree命令安装方法一,yum安装命令:yuminstalltree方法二,源码安装1.下载安装包,地址:http://mama.indstate.edu/users/ice/tree/2.解压安装1)Linux环境(CentOS6.5)下安装a.解压tree-1.7.0.tgz文件,命令:tar-zxvftree-1.7.0.tgzb.进入解压目录中,命令:cdtree-1.7.0      c.安装文件,命令:

    2022年7月24日
    6
  • mac idea 2022 激活码【2022免费激活】2022.01.27[通俗易懂]

    (mac idea 2022 激活码)本文适用于JetBrains家族所有ide,包括IntelliJidea,phpstorm,webstorm,pycharm,datagrip等。IntelliJ2021最新激活注册码,破解教程可免费永久激活,亲测有效,下面是详细链接哦~https://javaforall.net/100143.html…

    2022年3月31日
    267
  • java @apimodelproperty(apiignore)

    @ApiModel使用场景:在实体类上边使用,标记类时swagger的解析类。概述:提供有关swagger模型的其它信息,类将在操作中用作类型时自动内省。用法:@ApiModelProperty使用场景:使用在被@ApiModel注解的模型类的属性上。表示对model属性的说明或者数据操作更改。概述:添加和操作模型属性的数据。用法:…

    2022年4月14日
    292
  • visual studio发生了未处理的异常_打印显示灾难性故障

    visual studio发生了未处理的异常_打印显示灾难性故障【IDE-VisualStudio】灾难性故障(异常来自HRESULT0x8000FFFFEUNEXPECT

    2022年9月15日
    0
  • 2021版idea激活码99年-激活码分享

    (2021版idea激活码99年)最近有小伙伴私信我,问我这边有没有免费的intellijIdea的激活码,然后我将全栈君台教程分享给他了。激活成功之后他一直表示感谢,哈哈~IntelliJ2021最新激活注册码,破解教程可免费永久激活,亲测有效,下面是详细链接哦~https://javaforall.net/100143.html…

    2022年3月28日
    128

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注全栈程序员社区公众号