文档章节

css关于鼠标样式的设置

消散了的诗意
 消散了的诗意
发布于 2017/04/26 17:59
字数 516
阅读 18
收藏 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
博文 62
码字总数 27585
作品 0
玉溪
程序员
私信 提问
CSS3热身实战--过渡与动画(实现炫酷下拉,手风琴,无缝滚动)

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

守候i
2017/11/20
0
0
css样式改变鼠标指针形状实例

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

oecp
2011/06/23
0
0
jQuery基础 - 改变CSS样式

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

凯文加内特
2015/02/13
21K
0
适用于所有页面的基础样式base.css

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

顽皮的雪狐七七
01/17
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

没有更多内容

加载失败,请刷新页面

加载更多

ConcurrentHashMap 高并发性的实现机制

ConcurrentHashMap 的结构分析 为了更好的理解 ConcurrentHashMap 高并发的具体实现,让我们先探索它的结构模型。 ConcurrentHashMap 类中包含两个静态内部类 HashEntry 和 Segment。HashEnt...

TonyStarkSir
今天
3
0
大数据教程(7.4)HDFS的java客户端API(流处理方式)

博主上一篇博客分享了namenode和datanode的工作原理,本章节将继前面的HDFS的java客户端简单API后深度讲述HDFS流处理API。 场景:博主前面的文章介绍过HDFS上存的大文件会成不同的块存储在不...

em_aaron
昨天
2
0
聊聊storm的window trigger

序 本文主要研究一下storm的window trigger WindowTridentProcessor.prepare storm-core-1.2.2-sources.jar!/org/apache/storm/trident/windowing/WindowTridentProcessor.java public v......

go4it
昨天
6
0
CentOS 生产环境配置

初始配置 对于一般配置来说,不需要安装 epel-release 仓库,本文主要在于希望跟随 RHEL 的配置流程,紧跟红帽公司对于服务器的配置说明。 # yum update 安装 centos-release-scl # yum ins...

clin003
昨天
9
0
GPON网络故障处理手册

导读 为了方便广大网络工作者工作需要,特搜集以下GPON网络处理流程供大家学习参考。开始—初步定为故障—检查光纤状况—检查ONU状态--检查设备运行状态—检查设备数据配置—检查上层设备状态...

问题终结者
昨天
10
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部