效果图：

<!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. 【LeetCode】最长回文子串【动态规划或中心扩展】

    给定一个字符串 s,找到 s 中最长的回文子串.你可以假设 s 的最大长度为 1000. 示例 1: 输入: "babad"输出: "bab"注意: " ...

  2. linux系统状态脚本

    #!/bin/bashprintf "%10s\n" "##主机名##"printf "%-10s\n" "$(hostname) ...

  3. Docker简易安装及命令实例

    docker ~ ~ ~ Docker 是一个开源的应用容器引擎,基于 Go 语言 并遵从Apache2.0协议开源. Docker 可以让开发者打包他们的应用以及依赖包到一个轻量级.可移植的容器中, ...

  4. PAT(B) 1045 快速排序（C）

    题目链接:1045 快速排序 (25 point(s)) 参考博客:1045 快速排序 (25 point(s))繁星蓝雨 题目描述 著名的快速排序算法里有一个经典的划分过程:我们通常采用某种方法取一 ...

  5. TZOJ5697: 数据结构实验：归并排序

    #include<stdio.h> #include<stdlib.h> void merge(int a[], int start,int mid,int end) { )) ...

  6. CharacterEncodingFilter cannot be cast to javax.servlet.Filter

    java.lang.ClassCastException: org.springframework.web.filter.CharacterEncodingFilter cannot be cast ...

  7. [洛谷P3966][TJOI2013]单词

    题目大意:有$n$个字符串,求每个字符串在所有字符串中出现的次数 题解:$AC$自动机,每个节点被经过时$sz$加一,每一个字符串出现次数为其$fail$树子树$sz$和 卡点:$AC$自动机根节点为 ...

  8. 登录和退出Mysql

    这里介绍的是通过cmd方式登录和退出Mysql的方式 一.登录命令 登录命令:mysql.exe -h主机地址   -P端口   -u用户名    -p密码 即依次输入服务器地址.服务器监听的端口.用 ...

  9. 如何在 WPF 中获取所有已经显式赋过值的依赖项属性

    原文:如何在 WPF 中获取所有已经显式赋过值的依赖项属性 获取 WPF 的依赖项属性的值时,会依照优先级去各个级别获取.这样,无论你什么时候去获取依赖项属性,都至少是有一个有效值的.有什么方法可以获 ...

  10. 主机与虚拟机ping不通问题

    在win10 上利用vm安装linux虚拟机,物理机与虚拟机之间不能ping通,除了检查物理机与虚拟机防火墙状态外,还要注意物理机设置的ip与虚拟机设置的ip,要在同一个ip段