使用CSS为内容设定特定的鼠标样式(cursor)介绍
相信大家都知道我们的鼠标在网页中不同的元素中有不同的显示(例如 a
元素就显示为“箭头指针”),但是其实我们还可以自定义这些有趣的东西哦!今天“畅想资源”就来教大家如何使用CSS为内容设定特定的鼠标样式(cursor),让你的网页更加的生动、活泼!
教学
以下的表格显示了每一种样式相应的CSS代码,而只需将鼠标移动到对应的框格内就可以预览效果啦!(各种系统、浏览器下的效果可能有所区别!)
效果示例
cursor: alias; |
cursor: all-scroll; |
cursor: auto; |
cursor: cell; |
cursor: context-menu; |
cursor: col-resize; |
cursor: copy; |
cursor: crosshair; |
cursor: default; |
cursor: e-resize; |
cursor: ew-resize; |
cursor: grab; |
cursor: grabbing; |
cursor: help; |
cursor: move; |
cursor: n-resize; |
cursor: ne-resize; |
cursor: nesw-resize; |
cursor: ns-resize; |
cursor: nw-resize; |
cursor: nwse-resize; |
cursor: no-drop; |
cursor: none; |
cursor: not-allowed; |
cursor: pointer; |
cursor: progress; |
cursor: row-resize; |
cursor: s-resize; |
cursor: se-resize; |
cursor: sw-resize; |
cursor: text; |
cursor: url(http://codeo.cn/favicon.ico), url(myBall.cur), auto; |
cursor: vertical-text; |
cursor: w-resize; |
cursor: wait; |
cursor: zoom-in; |
cursor: zoom-out; |
cursor: initial; |
使用CSS为内容设定特定的鼠标样式(cursor)介绍的更多相关文章
- CSS鼠标样式 cursor 属性
值 描述 url 需使用的自定义光标的 URL. 注释:请在此列表的末端始终定义一种普通的光标,以防没有由 URL 定义的可用光标. default 默认光标(通常是一个箭头) auto 默认.浏览器 ...
- css鼠标样式cursor
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 鼠标样式 cursor 全总结
本文地址:https://www.cnblogs.com/veinyin/p/10752805.html 最常用的 key pointer cursor: key; // 除了pointer, ...
- CSS鼠标指针cursor样式
参考来源:W3SCHOOL 有时我们需要在CSS布局时设定特定的鼠标指针样式,这时可以通过设定cursor来实现: url: 需使用的自定义光标的 URL. 注释:请在此列表的末端始终定义一种普通的光 ...
- CSS 鼠标样式大全
cursor是CSS中用于定义鼠标在元素标签上的显示样式,如常用的手型鼠标样式 cursor: pointer; 也可以通过url网址指定扩展名一般为.cur的鼠标图片文件. 名称 属性代码 描述 默 ...
- jquery鼠标样式
浏览器是有自带的鼠标样式的,如果某些时候为了保持鼠标样式的统一,或者想指定特定的鼠标样式该怎么办呢?那就要使用自定义了,下面有个不错的示例,喜欢的朋友可以参考下 1.浏览器自带的鼠标样式: 2. ...
- CSS之 元素显示隐藏,用户界面样式,文本溢出隐藏,精灵技术,三角形
元素的显示与隐藏 display 显示 display 设置或检索对象是否及如何显示 display: none; 隐藏对象 display: block; 除了转换为块级元素, 同时还有显示元素的意 ...
- 鼠标常用样式(cursor)
<body> <div>常用的鼠标样式(cursor):pointer,move,defalt,text(火狐不支持hand)</div> </body> ...
- CSS进阶内容—盒子和阴影详解
CSS进阶内容 在学习了CSS基本知识之后,我们需要进一步了解CSS,因此写下了这篇文章 当然如果没有学习之前的知识,可以到我的主页中查看之前的文章:秋落雨微凉 - 博客园 CSS三大特性 首先我们先 ...
随机推荐
- Python文件之----XML
#coding=utf-8 from xml.dom import minidom from xml.dom.minidom import Document import xml def writeX ...
- POJ2566-Bound Found (尺取法)
POJ2566-Bound Found 题目大意:给出一段长度为n的数列,数列中的元素有正有负,求一段连续的区间,使得该区间的和的绝对值最接近给定的值 尺取法一般适用于对一段连续的区间的和进行处理的情 ...
- 各种开源协议介绍 BSD、Apache Licence、GPL V2 、GPL V3 、LGPL、MIT
现今存在的开源协议很多,而经过Open Source Initiative组织通过批准的开源协议目前有58种(http://www.opensource.org/licenses /alphabeti ...
- IOS开发----委托机制
委托模式从GoF装饰模式.适配器模式和模板方法等演变过来,几乎每一个应用都会或多或少的用到委托模式. 在古希腊有一个哲学家,他毕生只做三件事情:“睡觉”.“吃饭”.和“工作”.为了更好的生活,提高工作 ...
- <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalabl ...
- Ant快速入门(三)-----定义生成文件
适应Ant的关键就是编写生成文件,生成文件定义了该项目的各个生成任务(以target来表示,每个target表示一个生成任务),并定义生成任务之间的依赖关系. Ant生成文件的默认名为build.xm ...
- php通过curl实现bigpipe
BigPipe是facebook发明的一种页面加载技术.其实也不是什么新技术了,也有很多文章进行说明.但是在网上,具体讲如何使用php实现bigpipe的文章很少,并且有些文章还不很准确.bigpip ...
- 多备份CEO胡茂华:创业路上的五道坎
本文由多备份CEO胡茂华记述,授权南七道发表,未做删改.胡茂华:腾讯第116号员工,历任腾讯总监.盛大CTO (旅游).1号店技术副总裁.现担任云服务提供商多备份联合创始人&CEO. 2014 ...
- NOI 2005 维修数列
妈妈呀我终于过了!!!原来是数据坑我!!! 弃疗弃疗弃疗弃疗!!!!我调了一天呢....被GET_SUM 8 0打败了.... 啥也不说了....还是我太年轻.... 更新了一下常数,跑的还是可以的: ...
- WCF默认实例的解读
一:图片 IService1.cs是定义的接口,包含对Service.方法和方法用的类的声明的声明 Service1.cs是对接口的实现,包含实现的方法 代码注释: using System; usi ...