Home  >  Article  >  Web Front-end  >  css各种手型集合(css禁止手型)_html/css_WEB-ITnose

css各种手型集合(css禁止手型)_html/css_WEB-ITnose

WBOY
WBOYOriginal
2016-06-21 08:54:351666browse

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

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   }}


Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn