文档章节

css关于鼠标样式的设置

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

     

© 著作权归作者所有

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

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

守候i ⋅ 2017/11/20 ⋅ 0

适用于所有页面的基础样式base.css

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

顽皮的雪狐七七 ⋅ 01/17 ⋅ 0

jQuery基础 - 改变CSS样式

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

凯文加内特 ⋅ 2015/02/13 ⋅ 0

助你美化网站的实用css3技巧(2)

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

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

css样式改变鼠标指针形状实例

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

oecp ⋅ 2011/06/23 ⋅ 0

CSS基础知识(常复习,常修正)

Part1 CSS简介 CSS 层叠样式表:主要用于定义html内容在浏览器内的显示样式,如文字、大小、字体加粗等 css注释 /注释语句/ html注释 css样式由选择符和声明组成,而声明又由属性和值组成。当...

yuanyuan_chen ⋅ 2016/11/02 ⋅ 0

PHP+jQuery实现Ajax分页效果:jPaginate插件的应用

jPaginate是基于jQuery的动感滚动分页插件,它的表现形式是像分页的按钮一样,非常有意思的是这些按钮却可以滚动,可以通过单击或鼠标滑向点两侧的小箭头来控制按钮的前后滚动。 调用jPagina...

mickelfeng ⋅ 2013/12/28 ⋅ 2

前端CSS基础学习之——排版练习二

一、 二、HTML里 默认 超链接 带下划线,怎么去除呢 text-decoration:none 三、 标签定义多行的文本输入控件。 文本区中可容纳无限数量的文本,其中的文本的默认字体是等宽字体(通常是 Cour...

guitarist0505 ⋅ 03/27 ⋅ 0

原生js的小demo整理

image.png 1.二级导航 (js方法和css3的方法)--建议使用css3样式(若两种方法实现的效果一样) (1)js方法 例子 index.html Index.css(注意:注释的设置微博二字的hover,但在css样式里设置显...

lilyping ⋅ 2017/11/23 ⋅ 0

CSS的选择器

选择器做为CSS的灵魂一直是一个不可缺少的东西,使用CSS选择器的好处不用多说,对于整个文档的可读性 可修改性 以及在后面将要涉及到的关于对于CSS文档的复用性来说都是起到支柱性的作用。 ...

熊蛋子17 ⋅ 2017/11/10 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

JavaScript零基础入门——(八)JavaScript的数组

JavaScript零基础入门——(八)JavaScript的数组 欢迎大家回到我们的JavaScript零基础入门,上一节课我们讲了有关JavaScript正则表达式的相关知识点,便于大家更好的对字符串进行处理。这一...

JandenMa ⋅ 58分钟前 ⋅ 0

sbt网络问题解决方案

转自:http://dblab.xmu.edu.cn/blog/maven-network-problem/ cd ~/.sbt/launchers/0.13.9unzip -q ./sbt-launch.jar 修改 vi sbt/sbt.boot.properties 增加一个oschina库地址: [reposit......

狐狸老侠 ⋅ 今天 ⋅ 0

大数据,必须掌握的10项顶级安全技术

我们看到越来越多的数据泄漏事故、勒索软件和其他类型的网络攻击,这使得安全成为一个热门话题。 去年,企业IT面临的威胁仍然处于非常高的水平,每天都会看到媒体报道大量数据泄漏事故和攻击...

p柯西 ⋅ 今天 ⋅ 0

Linux下安装配置Hadoop2.7.6

前提 安装jdk 下载 wget http://mirrors.hust.edu.cn/apache/hadoop/common/hadoop-2.7.6/hadoop-2.7.6.tar.gz 解压 配置 vim /etc/profile # 配置java环境变量 export JAVA_HOME=/opt/jdk1......

晨猫 ⋅ 今天 ⋅ 0

crontab工具介绍

crontab crontab 是一个用于设置周期性被执行的任务工具。 周期性执行的任务列表称为Cron Table crontab(选项)(参数) -e:编辑该用户的计时器设置; -l:列出该用户的计时器设置; -r:删除该...

Linux学习笔记 ⋅ 今天 ⋅ 0

深入Java多线程——Java内存模型深入(2)

5. final域的内存语义 5.1 final域的重排序规则 1.对于final域,编译器和处理器要遵守两个重排序规则: (1)在构造函数内对一个final域的写入,与随后把这个被构造对象的引用赋值给一个引用...

江左煤郎 ⋅ 今天 ⋅ 0

面试-正向代理和反向代理

面试-正向代理和反向代理 Nginx 是一个高性能的反向代理服务器,但同时也支持正向代理方式的配置。

秋日芒草 ⋅ 今天 ⋅ 0

Spring 依赖注入(DI)

1、Setter方法注入: 通过设置方法注入依赖。这种方法既简单又常用。 类中定义set()方法: public class HelloWorldOutput{ HelloWorld helloWorld; public void setHelloWorld...

霍淇滨 ⋅ 昨天 ⋅ 0

马氏距离与欧氏距离

马氏距离 马氏距离也可以定义为两个服从同一分布并且其协方差矩阵为Σ的随机变量之间的差异程度。 如果协方差矩阵为单位矩阵,那么马氏距离就简化为欧氏距离,如果协方差矩阵为对角阵,则其也...

漫步当下 ⋅ 昨天 ⋅ 0

聊聊spring cloud的RequestRateLimiterGatewayFilter

序 本文主要研究一下spring cloud的RequestRateLimiterGatewayFilter GatewayAutoConfiguration @Configuration@ConditionalOnProperty(name = "spring.cloud.gateway.enabled", matchIfMi......

go4it ⋅ 昨天 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部