效果图：

<!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. CCS中的linked resource

    一.关于CCS中的linked resource linkded resources 是eclipse中的一个功能,可以将存放在项目所在位置以外某个路径的文件或者文件夹链接至工程项目中.这个功能最大的 ...

  2. JOIN的区别

    CREATE TABLE `j1` (  `id` int(10) unsigned NOT NULL AUTO_INCREMENT,  `c1` varchar(20) NOT NULL DEFAU ...

  3. IP核——RAM

    一.Quartus 1.打开Quartus ii,点击Tools---MegaWizard Plug-In Manager 2.弹出创建页面,选择Creat a new custom megafunc ...

  4. 开源图像识别库OpenCV基于Maven的开发环境准备

    1.安装 JDK 8+,并设置 JAVA_HOME 环境变量 2.安装 Maven,并将 “/bin” 子目录设置到 path 环境变量 3.下载 OpenCV,官网传送门 也可以直接下载本人瘦身之后 ...

  5. Linux环境python3.6.5

     安装python3.6可能使用的依赖 yum -y install zlib-devel bzip2-devel openssl-devel ncurses-devel sqlite-devel r ...

  6. idea 中激活 JRebel

    JRebel介绍: JRebel是一款JVM插件,它使得Java代码修改后不用重启系统,立即生效.IDEA上原生是不支持热部署的,一般更新了 Java 文件后要手动重启 Tomcat 服务器,修改才能 ...

  7. ASP.NET EF实体主外键关系

    其他解释 https://www.cnblogs.com/wuhenke/archive/2010/08/11/1797307.html 主键.外键 需要删除完外键表才能删除主键表 一对一关系peop ...

  8. CLASSPATH 环境变量设置

    当 JVM 运行时,如果设置了 CLASSPATH 变量,那么 JVM 会到该目录下寻找 java 类文件 该变量配置的方式不同,寻找顺序也不同 在我的 D:\tmp\java\quickstart\ ...

  9. iOS - 外加字体（只需三步-教你轻松实现）

    外加字体 1.首先info.plist中加入属性Fonts provided by application,在item 0 处填写导入的ttf文件名 eg: <key>UIAppFonts ...

  10. 网络时间同步服务和chrony

    时间同步和chrony 时间同步:多主机协作工作时,各个主机时间同步很重要,时间不一致会造成很多重要应用的故障,如:加密协议,日志,集群等, 利用NTP(Network Time Protocol) ...