效果图：

<!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. .Net 配置 swagger 使用nginx反向代理后请求带端口号导致无法正常访问---解决方法

    1 webconfig中 appsetting 中增加配置 <appSettings> <add key="aspnet:UseHostHeaderForRequestUr ...

  2. Mysql查看优化后的SQL 语句

    EXPLAIN  EXTENDED 1先执行 EXPLAIN  EXTENDED 2 show warnings: EXPLAIN EXTENDED SELECT * FROM `receivable ...

  3. mysql中数据表记录的增删查改(2)

    select `数据表.字段1`, group_concat(`数据表.字段2`) from `数据表` group by `数据表.字段1` order by `数据表.字段1` desc; sel ...

  4. quartz2.3.0（十二）通过RMI协议向Scheduler调度器远程添加job任务

    此代码示例通过RMI协议向Scheduler调度器远程添加job任务. 代码文件包括:job任务类(SimpleJob.java).RMI服务端server类(RemoteServerExample. ...

  5. [洛谷P5431]【模板】乘法逆元2

    题目大意:给定$n(n\leqslant5\times10^6)$个正整数$a_i$,和$k$.求:$$\sum_{i=1}^n\dfrac{k^i}{a_i}\pmod p$$题解:$$令P=\pr ...

  6. Bean管理学习笔记

    1.BeanFactory 介绍 1.1 首先什么是Bean? 1.Bean在Spring技术中是基于组件 2.他是Spring容器管理的最基本最常见的单元.在spring的应用场合中,bean可以是 ...

  7. Python之TensorFlow的基本介绍-1

    一.TensorFlow™是一个基于数据流编程(dataflow programming)的符号数学系统,被广泛应用于各类机器学习(machine learning)算法的编程实现,其前身是谷歌的神经 ...

  8. git push proxy 取消不掉 can not prox....

    使用这个折腾了半天 git config --global --unset http.proxy git config --global --unset https.proxy 没用,原来实现项目目录 ...

  9. 【转载】关于SimpleDateFormat安全的时间格式化线程安全问题

    想必大家对SimpleDateFormat并不陌生.SimpleDateFormat 是 Java 中一个非常常用的类,该类用来对日期字符串进行解析和格式化输出,但如果使用不小心会导致非常微妙和难以调 ...

  10. Java 之 方法引用

    方法引用 一.冗余的Lambda场景 来看一个简单的函数式接口以应用Lambda表达式: @FunctionalInterface public interface Printable { void ...