文档章节

css各种手型集合(css禁止手型)

白俊遥
 白俊遥
发布于 2016/03/13 23:25
字数 424
阅读 119
收藏 10

写这篇博客前不得不先吐槽下国内的技术性文章现状;

1:在国内真心缺少技术性的文章;

2:用百度搜技术性的文章真心不靠谱;

好吧;正题;下面是在国外搜刮来的;比较齐全的鼠标手型css;在国内的网站上是搜不到这么全的;比如说哪个禁止的手型;

鼠标往下移动即可看到效果;


html代码如下:
<h1>Cursors</h1>

<div class="cursors">
    <div class="auto">auto</div>
    <div class="default">default</div>
    <div class="none">none</div>
    <div class="context-menu">context-menu</div>
    <div class="help">help</div>
    <div class="pointer">pointer</div>
    <div class="progress">progress</div>
    <div class="wait">wait</div>
    <div class="cell">cell</div>
    <div class="crosshair">crosshair</div>
    <div class="text">text</div>
    <div class="vertical-text">vertical-text</div>
    <div class="alias">alias</div>
    <div class="copy">copy</div>
    <div class="move">move</div>
    <div class="no-drop">no-drop</div>
    <div class="not-allowed">not-allowed</div>
    <div class="all-scroll">all-scroll</div>
    <div class="col-resize">col-resize</div>
    <div class="row-resize">row-resize</div>
    <div class="n-resize">n-resize</div>
    <div class="s-resize">s-resize</div>
    <div class="e-resize">e-resize</div>
    <div class="w-resize">w-resize</div>
    <div class="ns-resize">ns-resize</div>
    <div class="ew-resize">ew-resize</div>
    <div class="ne-resize">ne-resize</div>
    <div class="nw-resize">nw-resize</div>
    <div class="se-resize">se-resize</div>
    <div class="sw-resize">sw-resize</div>
    <div class="nesw-resize">nesw-resize</div>
    <div class="nwse-resize">nwse-resize</div>
</div>

css代码如下:

@import "compass/css3";

.auto            { cursor: auto; }
.deafult         { cursor: default; }
.none            { cursor: none; }
.context-menu    { cursor: context-menu; }
.help            { cursor: help; }
.pointer         { cursor: pointer; }
.progress        { cursor: progress; }
.wait            { cursor: wait; }
.cell            { cursor: cell; }
.crosshair       { cursor: crosshair; }
.text            { cursor: text; }
.vertical-text   { cursor: vertical-text; }
.alias           { cursor: alias; }
.copy            { cursor: copy; }
.move            { cursor: move; }
.no-drop         { cursor: no-drop; }
.not-allowed     { cursor: not-allowed; }
.all-scroll      { cursor: all-scroll; }
.col-resize      { cursor: col-resize; }
.row-resize      { cursor: row-resize; }
.n-resize        { cursor: n-resize; }
.e-resize        { cursor: e-resize; }
.s-resize        { cursor: s-resize; }
.w-resize        { cursor: w-resize; }
.ns-resize       { cursor: ns-resize; }
.ew-resize       { cursor: ew-resize; }
.ne-resize       { cursor: ne-resize; }
.nw-resize       { cursor: nw-resize; }
.se-resize       { cursor: se-resize; }
.sw-resize       { cursor: sw-resize; }
.nesw-resize     { cursor: nesw-resize; }
.nwse-resize     { cursor: nwse-resize; }

.cursors > div {
   float: left;
   box-sizing: border-box;
   width: 20%;
   padding: 10px 2px;
   text-align: center;  
   white-space: nowrap;
   &:nth-child(even) {
      background: #eee;     
   }
   &:hover {
      opacity: 0.25
   }
}

白俊遥博客


© 著作权归作者所有

共有 人打赏支持
白俊遥
粉丝 17
博文 58
码字总数 28701
作品 3
朝阳
程序员
私信 提问
CSS 鼠标形状

css样式中鼠标形状的改变是通过cursor属性来决定的,如下所示: cursor: auto、hand、pointer、crosshair、default、text、vertical-text、wait、move、help、row-resize、col-resize、all-s...

柠檬晓蒙
2016/08/26
0
0
Web 开发人员需要了解的一些 HTML5 和 CSS3 片段

移除 IE 下 textarea 的滚动条 完全的CSS实现的透明效果 X-UA-Compatible Internet Explorer 条件判断 YUI 字体 Reset 更多相关文档请看 YUI developer documentation. 强制显示浏览器滚动条...

红薯
2011/05/11
777
2
鼠标放到a标签以后,该表鼠标的显示样式

样式的修改需要使用css进行控制的,控制的代码诸如:style="cursor:hand"其中hand表示的就是手型的样式,还有一下的几种: >其中的"hand"可以换成以下内容 pointer 手形 crosshair 十字形 te...

小老傅
2014/11/18
0
1
CSS(一)有用的CSS技巧(持续更新)

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/u014744118/article/details/79465215 1、定长显示,多余部分显示。。。 2、数据显示错误显示常用模板 2018.3...

CoolSummmer
2018/03/06
0
0
腾讯云—云+社区“线上实验室”,可以“动手”的code实验室,组队来一波?

腾讯云----云+社区致力于打造开发者的技术分享型社区。营造云计算技术生态圈,专注于提高开发者的技术影响力。分为专栏、问答、沙龙、开发者手册等众多板块!!! 云+社区链接在此:https://clo...

LynneJin
2018/04/13
0
0

没有更多内容

加载失败,请刷新页面

加载更多

2019 年最好的 7 款虚拟私人网络服务

糟糕的数据安全会带来极大的代价,特别是对企业而言。它会大致大规模的破坏并影响你的品牌声誉。尽管有些企业可以艰难地收拾残局,但仍有一些企业无法从事故中完全恢复。不过现在,你很幸运地...

linuxCool
22分钟前
1
0
OSChina 周一乱弹 —— 加油,还有11个小时就下班了

Osc乱弹歌单(2019)请戳(这里) 【今日歌曲】 @_全村的希望 :吴亦凡把大碗面正儿八经做成单曲了,你别说,还挺好听 《大碗宽面》- 吴亦凡 手机党少年们想听歌,请使劲儿戳(这里) @tom_t...

小小编辑
43分钟前
147
8
C++ vector和list的区别

1.vector数据结构 vector和数组类似,拥有一段连续的内存空间,并且起始地址不变。 因此能高效的进行随机存取,时间复杂度为o(1); 但因为内存空间是连续的,所以在进行插入和删除操作时,会造...

shzwork
今天
7
0
Spring之invokeBeanFactoryPostProcessors详解

Spring的refresh的invokeBeanFactoryPostProcessors,就是调用所有注册的、原始的BeanFactoryPostProcessor。 相关源码 public static void invokeBeanFactoryPostProcessors(Configu......

cregu
昨天
6
0
ibmcom/db2express-c_docker官方使用文档

(DEPRECIATED) Please check DB2 Developer-C Edition for the replacement. What is IBM DB2 Express-C ? ``IBM DB2 Express-C``` is the no-charge community edition of DB2 server, a si......

BG2KNT
昨天
4
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部