效果图：

<!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. Windows中使用 Python 调用 Matlab 程序

    https://ww2.mathworks.cn/help/matlab/matlab_external/system-and-configuration-requirements.html http ...

  2. 面试官问你MySQL的优化，看这篇文章就够了

    作者:zhangqh segmentfault.com/a/1190000012155267 一.EXPLAIN 做MySQL优化,我们要善用 EXPLAIN 查看SQL执行计划. 下面来个简单的示例 ...

  3. 【C++札记】实现C++的string类

    C++有了string类使得操作字符串变得很方便.有关string类,面试过程中也经常问到的就是自己实现一个sring类.下边实现个String类供大家参考: String.h #pragma onc ...

  4. 微信小程序的登入与授权

    官方文档:https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/login.html 小程序登录 小程序可以通 ...

  5. linux 下用C实现 ATM 自动取款机功能 （进程间通信）

    直接先上图: 项目需求: 主要分为两人大模块: 客户端 .进入时的功能开户.销户.登录.解锁 开户:输入姓名.身份证号.设置密码,如果开户成功,则服务器上保存一个账号信号(一个账号存一个文件,文件名建 ...

  6. [高清] 深入浅出Spring Boot 2.x.pdf + 代码

    ------ 郑重声明 --------- 资源来自网络,纯粹共享交流, 如果喜欢,请您务必支持正版!! --------------------------------------------- 下 ...

  7. 在jenkins中使用shell命令推送当前主机上的docker镜像到远程的Harbor私有仓库

    1.jenkins主机上的docker配置 先在Jenkins主机的docke上配置上Harbor私有仓库地址 cat /etc/docker/daemon.json { "insecure ...

  8. Dubbo学习摘录（二）

    扩展点机制 扩展点的配置 (1)根据关键字读取配置,获取具体的实现类 比如在 dubbo-demo-provider.xml 文件中配置: 则会根据rmi去读取具体的协议实现类RmiProtocol. ...

  9. Sql Server 根据条件查找多条数据中最大值的详细记录

    --(正常效果) select l.* from loadCurveSampling l left join Meter m on l.meter_id=m.Meter_ID --聚合当天最大值数据记 ...

  10. Java任务调度框架Quartz教程

    一.什么是quartz作业调度? Quartz框架是一个全功能.开源的任务调度服务,可以集成几乎任何的java应用程序—从小的单片机系统到大型的电子商务系统.Quartz可以执行上千上万的任务调度. ...