文档章节

css关于鼠标样式的设置

消散了的诗意
 消散了的诗意
发布于 2017/04/26 17:59
字数 516
阅读 12
收藏 0

CSS有一个属性:cursor,其作用是设置或检索在对象上移动的鼠标指针采用何种系统预定义的光标形状。 

 

  • auto默认(自适应)
  • text文本
  • hand手型
  • pointer手型
  • help带有问好的箭头
  • progress正在加载
  • move移动十字
  • no-drop不能放下
  • not-allowed禁止标记
  • wait等待
  • row-resize垂直拉伸
  • col-resize水平拉伸
  • vertical-text垂直文本
  • crosshair十字准心的箭头
  • n-resize上下的箭头(上)
  • s-resize上下的箭头(下)
  • w-resize左右的箭头(左)
  • e-resize左右的箭头(右)
  • ne-resize右上左下的箭头(右上)
  • sw-resize右上坐下的箭头(左下)
  • nw-resize左上右下的箭头(左上)
  • se-resize左上右下的箭头(右下)
  • <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title></title>
    	</head>
    	<body>
    		<ul>
    			<li style="cursor:auto"><span>auto默认(自适应)</span></li>
    			<li style="cursor:text"><span>text文本</span></li>
    			<li style="cursor:hand"><span>hand手型</span></li>
    			<li style="cursor:pointer"><span>pointer手型</span></li>
    			<li style="cursor:help"><span>help带有问好的箭头</span></li>
    			<li style="cursor:progress"><span>progress正在加载</span></li>
    			<li style="cursor:move"><span>move移动十字</span></li>
    			<li style="cursor:no-drop"><span>no-drop不能放下</span></li>
    			<li style="cursor:not-allowed"><span>not-allowed禁止标记</span></li>
    			<li style="cursor:wait"><span>wait等待</span></li>
    			<li style="cursor:row-resize"><span>row-resize垂直拉伸</span></li>
    			<li style="cursor:col-resize"><span>col-resize水平拉伸</span></li>
    			<li style="cursor:vertical-text"><span>vertical-text垂直文本</span></li>
    			<li style="cursor:crosshair"><span>crosshair十字准心的箭头</span></li>
    			<li style="cursor:n-resize"><span>n-resize上下的箭头(上)</span></li>
    			<li style="cursor:s-resize"><span>s-resize上下的箭头(下)</span></li>
    			<li style="cursor:w-resize"><span>w-resize左右的箭头(左)</span></li>
    			<li style="cursor:e-resize"><span>e-resize左右的箭头(右)</span></li>
    			<li style="cursor:ne-resize"><span>ne-resize右上左下的箭头(右上)</span></li>
    			<li style="cursor:sw-resize"><span>sw-resize右上坐下的箭头(左下)</span></li>
    			<li style="cursor:nw-resize"><span>nw-resize左上右下的箭头(左上)</span></li>
                <li style="cursor:se-resize"><span>se-resize左上右下的箭头(右下)</span></li>
    		</ul>
    		<style type="text/css">
    			li{
    				margin: 15px auto;
    				width: 300px;
    				list-style: none;
    				text-align: center;
    				line-height: 5ex;
    				background-color: #FAF0E6;
    				color:#5E2612;
    			}
    		</style>
    	</body>
    </html>

     

© 著作权归作者所有

共有 人打赏支持
消散了的诗意
粉丝 1
博文 60
码字总数 27094
作品 0
玉溪
程序员
CSS3热身实战--过渡与动画(实现炫酷下拉,手风琴,无缝滚动)

如果下面有提及‘发稿时间’,或者‘截止时间’,是指‘2017-8-1’。因为这篇文章是一篇迁移文章,是我以前在其它社区发布的原创文章。 1.前言 在自己的专栏上写了十几篇文章了,都是与js有关...

守候i
2017/11/20
0
0
适用于所有页面的基础样式base.css

这玩意,俗称base.css 几乎所有的页面,在搭建之前,都要用下面那个。BUT 一网打尽并不是最全的,最好的。还是要讲究需要什么用什么,小白知道怎么用就行了,而对于追求更高层次的而言,不仅...

顽皮的雪狐七七
01/17
0
0
jQuery基础 - 改变CSS样式

jQuery提供的方法来实现嵌入式改变元素样式,方法在使用上具有多样性。其中一种接受两个输入参数:样式属性和样式值,它们之间用逗号分开。比如我们要改变链接颜色,我们可以使用下面的代码:...

凯文加内特
2015/02/13
21K
0
css样式改变鼠标指针形状实例

改变鼠标指针形状的方法有两种;一种:用css样式表来改变鼠标指针形状。另一种是:利用第三方控件的方法,而我自己最常用的是第一种:用css样式表来改变鼠标指针形状 我们先来看第一种:用css样...

oecp
2011/06/23
0
0
助你美化网站的实用css3技巧(2)

CSS3 calc() 的使用 calc() 用法类似于函数,能够给元素设置动态的值: .simpleBlock { width: calc(100% - 100px);} .complexBlock { width: calc(100% - 50% / 3); padding: 5px calc(3% -......

罗马教堂的钟声
2015/12/02
46
0

没有更多内容

加载失败,请刷新页面

加载更多

OSX | SafariBookmarksSyncAgent意外退出解决方法

1. 启动系统, 按住⌘-R不松手2. 在实用工具(Utilities)下打开终端,输入csrutil disable, 然后回车; 你就看到提示系统完整性保护(SIP: System Integrity Protection)已禁用3. 输入reboot回车...

云迹
今天
4
0
面向对象类之间的关系

面向对象类之间的关系:is-a、has-a、use-a is-a关系也叫继承或泛化,比如大雁和鸟类之间的关系就是继承。 has-a关系称为关联关系,例如企鹅在气候寒冷的地方生活,“企鹅”和“气候”就是关...

gackey
今天
4
0
读书(附电子书)|小狗钱钱之白色的拉布拉多

关注公众号,在公众号中回复“小狗钱钱”可免费获得电子书。 一、背景 之前写了一篇文章 《小狗钱钱》 理财小白应该读的一本书,那时候我才看那本书,现在看了一大半了,发现这本书确实不错,...

tiankonguse
今天
4
0
Permissions 0777 for ‘***’ are too open

异常显示: @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@ @ WARNING: UNPROTECTED PRIVATE KEY FILE! @ @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@ ......

李玉长
今天
5
0
区块链10年了,还未落地,它失败了吗?

导读 几乎每个人,甚至是对通证持怀疑态度的人,都对区块链的技术有积极的看法,因为它有可能改变世界。然而,区块链技术问世已经10年了,我们仍然没有真正的用上区块链技术。 几乎每个人,甚...

问题终结者
今天
4
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部