相信大家都知道我们的鼠标在网页中不同的元素中有不同的显示(例如 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)介绍的更多相关文章

  1. CSS鼠标样式 cursor 属性

    值 描述 url 需使用的自定义光标的 URL. 注释:请在此列表的末端始终定义一种普通的光标,以防没有由 URL 定义的可用光标. default 默认光标(通常是一个箭头) auto 默认.浏览器 ...

  2. css鼠标样式cursor

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  3. 鼠标样式 cursor 全总结

    本文地址:https://www.cnblogs.com/veinyin/p/10752805.html  最常用的 key  pointer   cursor: key; // 除了pointer, ...

  4. CSS鼠标指针cursor样式

    参考来源:W3SCHOOL 有时我们需要在CSS布局时设定特定的鼠标指针样式,这时可以通过设定cursor来实现: url: 需使用的自定义光标的 URL. 注释:请在此列表的末端始终定义一种普通的光 ...

  5. CSS 鼠标样式大全

    cursor是CSS中用于定义鼠标在元素标签上的显示样式,如常用的手型鼠标样式 cursor: pointer; 也可以通过url网址指定扩展名一般为.cur的鼠标图片文件. 名称 属性代码 描述 默 ...

  6. jquery鼠标样式

    浏览器是有自带的鼠标样式的,如果某些时候为了保持鼠标样式的统一,或者想指定特定的鼠标样式该怎么办呢?那就要使用自定义了,下面有个不错的示例,喜欢的朋友可以参考下   1.浏览器自带的鼠标样式:  2. ...

  7. CSS之 元素显示隐藏,用户界面样式,文本溢出隐藏,精灵技术,三角形

    元素的显示与隐藏 display 显示 display 设置或检索对象是否及如何显示 display: none; 隐藏对象 display: block; 除了转换为块级元素, 同时还有显示元素的意 ...

  8. 鼠标常用样式(cursor)

    <body> <div>常用的鼠标样式(cursor):pointer,move,defalt,text(火狐不支持hand)</div> </body> ...

  9. CSS进阶内容—盒子和阴影详解

    CSS进阶内容 在学习了CSS基本知识之后,我们需要进一步了解CSS,因此写下了这篇文章 当然如果没有学习之前的知识,可以到我的主页中查看之前的文章:秋落雨微凉 - 博客园 CSS三大特性 首先我们先 ...

随机推荐

  1. 使用<pre>标签为你的网页加入大段代码

    在上节中介绍加入一行代码的标签为<code>,但是在大多数情况下是需要加入大段代码的,如下图: 怎么办?不会是每一代码都加入一个<code>标签吧,没有这么复杂,这时候就可以使 ...

  2. Qt中绘图坐标QPainter,Viewport与Window的关系

    在Qt中常常要自己重载一些paintEvent函数,这个时候往往忽略了两个很关键的API,那就是setViewport和setWindow. Viewport,顾名思义,反应的是物理坐标,就是你实际想 ...

  3. (转载)用css来实现十字的布局

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  4. C# Trim方法去除字符串两端的指定字符

    var str= ",2,3,4,6,7,"; var str2 = str.Trim(new char[] { ',' }); //去除字符串str两端的','字符. //则st ...

  5. WebForm,Winfrom下拉框添加全部行

    WebForm: dropPostalLineNo.DataSource = "数据源";        dropPostalLineNo.DataTextField = &quo ...

  6. C# ,asp.net 获取当前,相对,绝对路径(转)

    C# ,asp.net 获取当前,相对,绝对路径 一.C#获取当前路径的方法: . System.Diagnostics.Process.GetCurrentProcess().MainModule. ...

  7. linux下php上传文件注意

    linux下php上传文件注意1.修改上传目录权限linux 修改某目录下所有所有子目录权限chmod -R 777 html修改某目录为任何用户都用写读执行权限chmod a+rwx html2.设 ...

  8. linux c信息验证程序(分享)

    程序来源是Hirst First c,程序很简单,但却是很好的说明了一个检测信息是否被串改的原理.下载程序的时候是否都有看到提供md5效验值的呢,原理其实和这个小程序相似:就是对程序的内容进行某种计算 ...

  9. Python使用Pygame.mixer播放音乐

    Python使用Pygame.mixer播放音乐 frequency这里是调频率... 播放网络中的音频: #!/usr/bin/env python # -*- coding: utf-8 -*- ...

  10. Hadoop 学习笔记(二) HDFS API

    4.删除HDFS上的文件 package proj; import java.io.IOException; import org.apache.hadoop.conf.Configuration; ...