效果图：

<!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>

css cursor效果图的更多相关文章

  1. 鼠标指针光标样式css cursor default pointer hand url

    一.cursor语法与结构 1.cursor语法:cursor : auto | crosshair | default | hand | move | help | wait | text | w- ...

  2. css cursor url用法格式详解

    css cursor url用法格式:css:{cursor:url('图标路径'),auto;} //IE,FF,chrome浏览器都可以 实例代码:html{cursor: url("h ...

  3. css Cursor:url()自定义鼠标指针样式为图片

    css自定义鼠标指针样式为图片Cursor:url()的使用,今天在项目中,要用到自定义鼠标样式,格式: css:{cursor:url('绝对路径的图片(格式:cur,ico)'),-moz-zoo ...

  4. 【CSS】按钮的禁用与可用 CSS Cursor 属性

    禁用时的样式 可用时的样式 样式很简单,禁用就设置为灰色,可用就设置为红色,今天这个不是重点,重点的是,光标的样子 一般,禁用时候,光标移动到按钮的上方,光标如下 而在启用按钮的时候,光标移动到按钮上 ...

  5. CSS cursor 属性--css html 鼠标手型,鼠标形状,鼠标效果,样式

    css鼠标手型cursor中hand与pointer Example:CSS鼠标手型效果 <a href="#" style="cursor:hand"& ...

  6. CSS：CSS cursor 属性

    ylbtech-CSS:CSS cursor 属性 1.返回顶部 1. 实例 一些不同的光标: span.crosshair {cursor:crosshair;} span.help {cursor ...

  7. 光标属性CSS cursor 属性

    CSS cursor 属性 CSS cursor属性,以前不知道,如果以后用到自己看的 <html> <body> <p>请把鼠标移动到单词上,可以看到鼠标指针发生 ...

  8. [CSS]cursor鼠标样式

     用css控制鼠标样式的语法如下: <span style="cursor:*">文本或其它页面元素</span>  把 * 换成如下15个效果的一种:   ...

  9. css cursor属性-显示的光标的类型(形状)的用法和定义

    在网页布局的时候,在特定的地方,光标形状各有区别.这个时候,就需要用到css的cursor属性.根据自身需要选择设置鼠标指针样式. 定义和用法 cursor 属性规定要显示的光标的类型(形状). 该属 ...

随机推荐

  1. GroupBy之后加ToList和不加ToList有什么区别吗？

        class Program    {        static void Main(string[] args)        {             List<Person> ...

  2. Ackermann Steering System

    Source : https://www.hotrod.com/articles/ctrp-0407-ackermann-steering-system/ Tuning Your Steering S ...

  3. laravel迁移文件中字段方法对应的数据库类型

    /* *Blueprint类中的方法方法 <-> 数据库数据类型 * */ // 数字 increments();// int(10) unsigned primarykey auto_i ...

  4. Detecting GAN-generated Imagery using Color Cues

    Abstract     论文创新点:分析流行GAN网络结构得知,GAN网络生成得图片在颜色处理与真实摄像机拍摄的照片存在不同,主要表现在两方面.     实验结果:证明了两种线索能够有效区分GAN生 ...

  5. vue中$router与$route的区别

    $.router是VueRouter的实例,相当于一个全局的路由器对象.包含很多属性和子对象,例如history对象 $.route表示当前正在跳转的路由对象.可以通过$.route获取到name,p ...

  6. gitlab 安装、备份与还原及常见设置

    gitlab 安装.备份与还原及常见设置 安装 安装过程比较简单,跑在 docker 上,执行命令即可 -v参数后面的值为卷的名称,自动创建数据卷(如果数据卷不存在) https://docs.git ...

  7. postgres 序列

    postgres序列(serial)和类型:https://www.cnblogs.com/alianbog/p/5654604.html 序列:https://www.cnblogs.com/mch ...

  8. treeMultiselect 去掉勾选项

    场景描述:弹窗,显示树形结构,节点层次可变(可只有一级节点,也可是多级节点),限制只能选择一个节点! 1.修改jquery.tree-multiselect.min.js 文件 2.前台页面 参考代码 ...

  9. [转]mongodb authentication 设置权限之后，新建个管理账户和一般数据库用户，在win 7 64bit 环境下测试使用实例

    如果之前安装mongodb时没有使用 --auth,那么必须要卸载MongoDB服务,进行重新安装,设置账号权限才生效! 主要是解决在测试使用mongo db 时候,总是出现的MongoAuthent ...

  10. [React] 函数定义组件

    函数定义组件的例子 function Welcome(props) { return <h1>Hello, {props.name}</h1>; } 该函数是一个有效的 Rea ...