文档章节

css关于鼠标样式的设置

消散了的诗意
 消散了的诗意
发布于 2017/04/26 17:59
字数 516
阅读 24
收藏 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>

     

© 著作权归作者所有

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

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

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

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

顽皮的雪狐七七
2018/01/17
0
0
css样式改变鼠标指针形状实例

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

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

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

凯文加内特
2015/02/13
21K
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

没有更多内容

加载失败,请刷新页面

加载更多

Linux Wireshark普通用户启动使用方案

当系统安装好Wireshark后请正常启动是否可以进行正常使用,如果不行请参考下列指导 向系统添加一个用户组 sudo groupadd wireshark //如提示此组存在可跳过 将指定用户添加到这个组中 sudo...

CHONGCHEN
今天
1
0
CSS 选择器参考手册

CSS 选择器参考手册 选择器 描述 [attribute] 用于选取带有指定属性的元素。 [attribute=value] 用于选取带有指定属性和值的元素。 [attribute~=value] 用于选取属性值中包含指定词汇的元素。...

Jack088
今天
2
0
数据库篇一

数据库篇 第1章 数据库介绍 1.1 数据库概述  什么是数据库(DB:DataBase) 数据库就是存储数据的仓库,其本质是一个文件系统,数据按照特定的格式将数据存储起来,用户可以对数据库中的数据...

stars永恒
今天
4
0
Intellij IDEA中设置了jsp页面,但是在访问页面时却提示404

在Intellij IDEA中设置了spring boot的jsp页面,但是在访问时,却出现404,Not Found,经过查找资料后解决,步骤如下: 在Run/Debug Configurations面板中设置该程序的Working Directory选项...

uknow8692
昨天
4
0
day24:文档第五行增内容|每月1号压缩/etc/目录|过滤文本重复次数多的10个单词|人员分组|

1、在文本文档1.txt里第五行下面增加如下内容;两个方法; # This is a test file.# Test insert line into this file. 分析:给文档后增加内容,可以用sed 来搞定;也可以用while do done...

芬野de博客
昨天
4
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部