css样式cursor属性值

最新推荐文章于 2024-03-07 09:35:05 发布
最新推荐文章于 2024-03-07 09:35:05 发布
阅读量4.8k 收藏 7
点赞数 2
分类专栏： web 兼容问题 CSS 文章标签： css cursor
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Daisukes/article/details/52839711
版权
web 同时被 3 个专栏收录
21 篇文章 0 订阅
订阅专栏
CSS
15 篇文章 0 订阅
订阅专栏
兼容问题
8 篇文章 0 订阅
订阅专栏

定义：设置或检索在对象上移动的鼠标指针采用何种系统预定义的光标形状。

使用自定义图像作为光标类型，IE, Opera只支持*.cur等特定的图片格式；Firefox, Chrome, Safari既支持特定图片类型也支持常见的*.png, *.gif, *.jpg等图片格式。

  • cursor的属性值可以是一个序列

    示例代码：

    :link,:visited{
	cursor:url(example.svg#linkcursor),
			url(hyper.cur),
			url(hyper.png) 2 3,
			pointer;
}

    本例用来给所有的超链接定义光标类型，客户端如果不支持SVG类型的光标，则使用下个"hyper.cur"；如果cur类型也不支持，则使用下个"hyper.png"；依次类推。

  • 对应的脚本特性为cursor。

cursor的属性值： auto | default | none | context-menu | help | pointer | progress | wait | cell | crosshair | text | vertical-text | alias | copy | move | no-drop | not-allowed | e-resize | n-resize | ne-resize | nw-resize | s-resize | se-resize | sw-resize | w-resize | ew-resize | ns-resize | nesw-resize | nwse-resize | col-resize | row-resize | all-scroll | zoom-in | zoom-out | grab | grabbing



取值：
auto：
    用户代理基于当前上下文决定光标形状
default：
    相关平台的默认光标形状，通常为箭头。
none：
    没有光标形状

各个属性值的兼容性：

如下是cursor的全部属性例子：


 
<span style="font-family:KaiTi_GB2312;"><!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
<meta charset="utf-8" />
<title>cursor_CSS参考手册_web前端开发参考手册系列</title>
<meta name="author" content="Joy Du(飘零雾雨), dooyoe@gmail.com, www.doyoe.com" />
<style>
.test{width:400px;border-collapse:collapse;font:14px/1.5 georgia,arial,serif,sans-serif;}
.test td{padding:2px 10px;border:1px solid #ddd;}
.test td:hover{background:#eee;}
.auto{cursor:auto;}
.default{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;}
.e-resize{cursor:e-resize;}
.n-resize{cursor:n-resize;}
.ne-resize{cursor:ne-resize;}
.nw-resize{cursor:nw-resize;}
.s-resize{cursor:s-resize;}
.se-resize{cursor:se-resize;}
.sw-resize{cursor:sw-resize;}
.w-resize{cursor:w-resize;}
.ew-resize{cursor:ew-resize;}
.ns-resize{cursor:ns-resize;}
.nesw-resize{cursor:nesw-resize;}
.nwse-resize{cursor:nwse-resize;}
.col-resize{cursor:col-resize;}
.row-resize{cursor:row-resize;}
.all-scroll{cursor:all-scroll;}
.zoom-in{cursor:zoom-in;}
.zoom-out{cursor:zoom-out;}
.url{cursor:url(skin/cursor.gif),
            url(skin/cursor.png),
            url(skin/cursor.jpg),
            pointer;}
</style>
</head>
<body>
<table class="test">
    <caption>cursor光标类型</caption>
    <tbody>
        <tr>
            <td class="auto">auto</td>
            <td class="default">default</td>
            <td class="none">none</td>
            <td class="context-menu">context-menu</td>
            <td class="help">help</td>
            <td class="pointer">pointer</td>
            <td class="progress">progress</td>
        </tr>
        <tr>
            <td class="wait">wait</td>
            <td class="cell">cell</td>
            <td class="crosshair">crosshair</td>
            <td class="text">text</td>
            <td class="vertical-text">vertical-text</td>
            <td class="alias">alias</td>
            <td class="copy">copy</td>
        </tr>
        <tr>
            <td class="move">move</td>
            <td class="no-drop">no-drop</td>
            <td class="not-allowed">not-allowed</td>
            <td class="e-resize">e-resize</td>
            <td class="n-resize">n-resize</td>
            <td class="ne-resize">ne-resize</td>
            <td class="nw-resize">nw-resize</td>
        </tr>
        <tr>
            <td class="s-resize">s-resize</td>
            <td class="se-resize">se-resize</td>
            <td class="sw-resize">sw-resize</td>
            <td class="w-resize">w-resize</td>
            <td class="ew-resize">ew-resize</td>
            <td class="ns-resize">ns-resize</td>
            <td class="nesw-resize">nesw-resize</td>
        </tr>
        <tr>
            <td class="nwse-resize">nwse-resize</td>
            <td class="col-resize">col-resize</td>
            <td class="row-resize">row-resize</td>
            <td class="all-scroll">all-scroll</td>
            <td class="url">url</td>
            <td class="zoom-in">zoom-in</td>
            <td class="zoom-out">zoom-out</td>
        </tr>
    </tbody>
</table>
</body>
</html></span>
Daisukes
关注
  • 2
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
css不常见属性之pointer-events的使用方法
12-03
MDN 上介绍为 CSS 属性指定在什么情况下 (如果有) 某个特定的图形元素可以成为鼠标事件的 target。 pointer-events 属性值有: /* Keyword values */ pointer-events: auto; pointer-events: none; pointer-events: visiblePainted; /* SVG only */ pointer-events: visibleFill; /* SVG only */ pointer-events: visibleStroke; /* SVG only */ pointer-events:
简单但很实用的5个css属性
01-19
我提到的都是被所有浏览器支持的css2属性比如：clip、min-height、white-space、cursor和display。千万别错过这篇文章，因为你会惊讶的发现他们是很有用的。一、css clip（裁切）clip裁切这个属性有点像是遮罩。它允许你用特定的形状遮罩相应的内容。裁切某元素之前，你必须先给该元素指定绝对定位属性，然后给它的上下左右赋值。图片裁切举例（演示）在接下来的这个例子里面，主要展示如何给一个图片应用裁切属性。首先，指定div元素相对定位，然后给图片赋予绝对定位属性和相应的属性值。代码如下：.clip {position: relative;height: 130px
CSS鼠标样式（cursor）
最新发布
m0_63057114的博客
03-07 1123
CSS鼠标样式（cursor）属性值介绍，以及常用案例...
CSS更改鼠标为手状样式
01-21
在自行设置的div或者其他标签中，为了更好的体验效果，会将在滑动过程中，将鼠标变为手势 简单总结下css对应的样式。 所在的div中，添加cursor:pointer即可。 示例： CSS Code复制内容到剪贴板 <div u00a0id=doPrint style>              手势变化区域      </div>     对应的属性值还有如下： CSS Code复制内容到剪贴板 a
CSS常用样式简单的总结包括定位、显示等属性
12-13
鼠标属性： 通过cursor属性来实现 Style=”cursor :hand” 定位和显示 1.定位属性 CSS定位属性包括position、top、bottom、left、right和z-index Position属性指定元素如何在页面上定位，取值为：static ,relative或absolute. Static表示正常定位，relative是指定位在相对于页面上前一个元素的尾端位置，absolute是用绝对位置指定元素在页面中的位置。 Top和left属性指定某元素与其父元素或其他元素之间的距离 Z-index属性控制元素的重叠，值较高的元素将覆盖值较低的元素，如
javascript-css3-lookup:JS的实用程序类，它显示CSS3中的所有可用属性值
05-16
css3 css3是CSS3属性的查找实用程序，可在JavaScript中编写内联样式时使用。 这是一个简单的对象，其中包含大多数CSS3属性的大多数常用选项。 用法 安装后，按如下所示导入实用程序： import { css3 } from '@toolz/css3' ; 现在， css3变量将在您的代码中可用，并且对象的结构应在IDE中提供更轻松的代码完成。 例子： export const Foo = ( ) => { return < > < div style = { { cursor : css3 . cursor . crosshair , // every time you type one of the periods on the line above, // your IDE sho
css各种鼠标形状设置
R_dong_dong_的博客
07-13 1797
col-resize（左右箭头和双竖线）row-resize（上下箭头和双竖线）not-allowed（红色禁止符号）context-menu（普通箭头）nesw-resize（斜向箭头）nwse-resize（斜向箭头）all-scroll（移动箭头）ns-resize（上下箭头）ew-resize（左右箭头）ne-resize（斜向箭头）nw-resize（斜向箭头）se-resize（斜向箭头）sw-resize（斜向箭头）n-resize（上下箭头）s-resize（上下箭头）
JS自定义光标案例
qq_44920883的博客
12-17 990
<img src="images/xxx.png"> img{ position: absolute; width: 50px; height: 50px; top: 100px; left: 100px; cursor: none; } var pic=document.querySelector('img'); doc..
CSS - 鼠标指针样式详解（cursor光标样式、自定义指针图片）
南城旧梦_de博客
04-27 1万+
我们浏览网页时会发现，鼠标指针会根据不同类型的元素进行相应的变化，比如：移到文本框上时会变成文本指示样式，移到链接上时会变成手型（手指形状）。 如果想要修改指针样式，只需要通过cursor这个CSS样式进行设置即可。 1，修改光标样式 假设我们想让光标移动到按钮上时变成十字形状： （1）最简单的方法就是直接设置元素的cursor样式。 1 <button type="button"name="button"style="cur...
html中cursor的属性,cursor怎么用？CSS中cursor属性的使用方法以及可选值的解析
热门推荐
weixin_29822105的博客
06-04 1万+
在页面布局时，CSS是工作中必不可少的部分，常听别人讲：HTML是一个人素颜的样子，加了CSS后是一个人化妆以后的样子。这句话通俗易懂，很好的诠释了CSS与HTML之间的关系。CSS中的属性非常多，今天就着重讲一个属性，即CSS cursor属性，以及它的很多可选值，比如：cursor 手型 就是用的 cursor:pointer 这个属性。cursor怎么用？一、CSS cursor 基本语法c...
CSSCursor属性所有值的说明
码奴一只猿
04-19 1632
在Web开发中，CSS Cursor属性是一个用来定义鼠标光标在特定元素上的外观的非常重要的属性。这个属性的使用非常简单，只需要在CSS中指定一个元素的Cursor属性的值即可。下面将为大家详细介绍CSS Cursor属性的所有可用值。
Web前端之浅谈css
白毛菌儿的博客
07-08 259
Web前端之浅谈CSSCSS什么是CSS？CSS的三种引用方式CSS常用选择器介绍选择器权重字体属性文本属性元素分类display属性:块状元素行内元素行内块元素盒模型内边距padding边框border外边距margin清除某些HTML元素的默认样式盒子居中显示CSS布局之浮动（float）浮动的破坏性BFC定位静态定位相对定位绝对定位固定定位解决压盖现象CSS背景属性制作圆、圆环以及半圆使网页...
CSS cursor鼠标属性
qq_44947708的博客
09-10 324
CSS cursor鼠标属性 cursor是CSS中用于定义鼠标在元素标签上的显示样式，如常用的手型鼠标样式 cursor: pointer 。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>cursor鼠标样式</title&...
cursor:pointer 什么意思?
diemi9921的博客
07-13 6454
cursor规则是设定网页浏览时用户鼠标指针的样式，也就是鼠标的图形形状cursor：pointer设定鼠标的形状为一只伸出食指的手，这也是绝大多数浏览器里面鼠标停留在网页链接上方时候的样式另外可以选择其他鼠标指针样式，常用的有default 箭头，crosshair 十字，progress 箭头和沙漏等等 转载于:https://www.cnblogs.com/XACOOL/p/56...
web前端学习-CSS
yong_19930826的博客
03-22 1622
web前端学习-CSS1 CSS基础1.1 CSS的基础认知1.2 CSS基础选择器1.2.1标签1.2.2 类选择器1.2.3 id选择器1.2.4 通配符选择器1.3 文字和文本样式1.3.1 文字基本样式1.3.2 文字-字体1.3.3 拓展-层叠性1.3.4 font复合属性1.3.5 文本缩进1.3.6 水平对齐方式1.3.3 文本修饰线1.3.3 行高 1 CSS基础 1.1 CSS的基础认知 1.2 CSS基础选择器 1.2.1标签 1.2.2 类选择器 先定义 后使用 每个类都
图片拖拽+自定义大小
weixin_50236973的博客
04-15 249
本文直接贴全部代码，详情内容和gif动图效果可直接点击转载的网站观看 import React, {Component, useState, useRef, useCallback} from 'react'; /** * 元素变化。 方法放在组件外部或者其余地方。 * @param direction 方向 // move 移动 / 'e', 'w', 's', 'n', 'ne', 'nw', 'se', 'sw' * @param oriStyle 元素的属性 width height
CSS鼠标样式属性 cursor 的属性值
Allen的博客
06-21 2398
一、用法: 二、属性值： 三、jq控制css的cursor应用
光标 cursor 属性值详解
welnee的博客
10-10 557
curson 属性值详解
div上下拖拽（resize）
渐变强的小刘
04-21 2741
实现拖拽的方式有很多种，css实现可能不是最好的实现方式，仅供参考。 话不多说，先上图 需求介绍：主要实现的是 中间区域（红框）内可以托住上下拖动. 功能实现所需： resize: css3新增属性，放在div上即可使其可以拖拽，详见:resize介绍文档(https://www.w3school.com.cn/cssref/pr_resize.asp) cursor:ns-resize，上下拖拽鼠标图标.详见：[cursor属性](https://developer.mozilla.org/zh.
前端cursor的属性值及其含义
05-31
前端cursor属性用于设置鼠标指针的样式，常用的属性值及其含义如下： 1. auto：浏览器自动设置光标的类型。 2. pointer：光标呈现为指针，通常用于链接。 3. default：默认光标，通常用于文本。 4. text：光标呈现为文本样式，通常用于输入文本。 5. move：光标呈现为移动样式，通常用于拖拽。 6. wait：光标呈现为等待样式，通常用于异步请求等待。 7. crosshair：光标呈现为十字线样式，通常用于绘图。 8. help：光标呈现为帮助样式，通常用于提示信息。 9. not-allowed：光标呈现为禁止样式，通常用于禁止操作。 例如，将鼠标指针设置为手型指针可以这样写： ```css cursor: pointer; ```

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值