使用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三大特性 首先我们先 ...
随机推荐
- iOS App上传中遇到的问题
1. 今天打包上传文件时出现“Missing iOS Distribution signing identity for XXXX” 导致问题的原因是:下边这个证书过期了 以下是苹果官方给出的回应: ...
- Windows Phone中使用Storyboard做类似 IOS 屏幕小白点的效果
windows phone中做动画其实很方便的,可以使用Blend拖来拖去就做出一个简单的动画,下面做了一个 ios屏幕小白点的拖动效果,包括速度判断移动 使用Blend生成以下代码 <Stor ...
- SxsTrace工具使用方法(转)
http://blog.sina.com.cn/s/blog_494e45fe0102dtt3.html Windows7平台上有一个强大的SxsTrace工具,可以跟踪调试应用程序运行时需要的动态库 ...
- JVM内存管理及垃圾回收
一.JVM内存的构 Java虚拟机会将内存分为几个不同的管理区,这些区域各自有各自的用途,根据不同的特点,承担不同的任务以及在垃圾回收时运用不同的算法.总体分为下面几个部分: 程序计数器(Progra ...
- Linux下的Job Control(转:http://blog.chinaunix.net/uid-26495963-id-3062757.html)
一.Job的概念 Job是指在批处理的环境中,为完成某一任务而进行一系列操作的总称.在个人接触计算机的年代,批处理的环境已经不容见到了,只有一些特殊的行业和环境下还在使用这样的概念,仅在书本中接触过. ...
- · HTML使用Viewport
· HTML使用ViewportViewport可以加速页面的渲染,请使用以下代码<meta name=”viewport” content=”width=device-width, initi ...
- 学c语言做练习之统计文件中字符的个数
统计文件中字符的个数(采用命令行参数) #include<stdio.h> #include<stdlib.h> int main(int argc, char *argv[] ...
- Hybrid----优秀开源代码解读之JS与iOS Native Code互调的优雅实现方案-备
本篇为大家介绍一个优秀的开源小项目:WebViewJavascriptBridge. 它优雅地实现了在使用UIWebView时JS与ios 的ObjC nativecode之间的互调,支持消息发送.接 ...
- 转:php连接oracle设定字符集,避免乱码
原文来自于:http://muyu.iteye.com/blog/399884 数据库用oracle,当php连接oracle的时候,最好指定字符集. 查PHP手册,oci_connect的第四个参数 ...
- java 上传图片 打水印
其实就是在现有的图片上,画东西,也可以直接 贴图片 //添加水印 @Override public File pressFile(File file,String press_path) throws ...