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

鼠标放上去，不同的cursor光标类型的更多相关文章

  1. cursor光标类型

    今天早上在网上看到一篇关于光标类型的总结代码,很好,特定拿来: 最终结果: 代码: <!DOCTYPE html> <html lang="zh-cn"> ...

  2. CSS display overflow 属性 cursor光标类型

    display属性   功能:规则网页元素如何显示的问题.   取值:none(隐藏).block(以块元素显示).inline(以行内元素显示)   block:可以实现将行内元素转成块元素.   ...

  3. css中cursor(光标类型)

    值 描述 url 需使用的自定义光标的 URL. 注释:请在此列表的末端始终定义一种普通的光标,以防没有由 URL 定义的可用光标. default 默认光标(通常是一个箭头) auto 默认.浏览器 ...

  4. 常用cursor光标说明

    1.cursor语法: cursor : auto | crosshair | default | hand | move | help | wait | text | w-resize |s-res ...

  5. 点击图片或者鼠标放上hover .图片变大. 1)可以使用css中的transition, transform 2) 预先设置一个 弹出div. 3)弹出层 alert ; 4) 浏览器的宽度document.documentElement.clientWidth || document.body.clientWidth

    变大: 方法一: 利用css属性. 鼠标放上 hover放大几倍. .kecheng_02_cell_content img { /*width: 100px; height: 133px;*/ wi ...

  6. python: HTML之 鼠标放上去下拉项字体显示不同颜色

    鼠标放上去下拉项字体显示不同颜色 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "h ...

  7. css 鼠标移动到按钮图片改变；图片换层；鼠标放上透明度改变直到隐藏；

    css 鼠标移动到按钮图片改变: 方法一: <style> .pp a { width:575px; height:157px; background:url(1.jpg);/*图片地址* ...

  8. 鼠标放上去，div高度随文字增加，并显示剩余的文字。

    /*这里是鼠标放上去显示全名   */    .kb2wText{display:block; height:20px; width:150px; line-height:20px; color:#0 ...

  9. JS实现 鼠标放上去 图片自动放大的效果

    前段时间做项目,要实现,一张图片,鼠标放上去图片自动变大的效果,虽然难度不大,但当时也想了一段时间,当时没时间记录一下,现在有时间了,写篇博客把代码给记录一下: 效果如下: 代码如下: <!DO ...

随机推荐

  1. 修改linux系统时间的方法(date命令)

    修改linux系统时间的方法(date命令) 来源:互联网 作者:佚名 时间:11-18 23:22:27 [大 中 小] date命令不仅可以显示系统当前时间,还可以用它来修改系统时间,下面简单的介 ...

  2. 20145317彭垚 《Java程序设计》第7周学习总结

    20145317彭垚 <Java程序设计>第7周学习总结 教材学习内容总结 第十三章 时间与日期 13.1.1 时间的度量·即使标注为GMT(格林威治时间),实际上谈到的的是UTC(Uni ...

  3. 12秒开机！ExpressCache SSD缓存加速

    SSD固态硬盘的读写速度比传统硬盘快了很多,读取速度能到300M/s 写入速度大约在80M/S 但SSD硬盘的价格也笔记机械硬盘高了很多,128G的固态硬盘淘宝价大概在800左右,想想现在随便一个软件 ...

  4. 样条曲线的Fortran程序

    subroutine basis_function_b_val ( tdata, tval, yval ) ! !******************************************* ...

  5. 哈哈，好像swift 以后有可能用来开发安卓喔

    好像swift  以后有可能用来开发安卓喔,哈哈

  6. Bluetooth SDP介绍

    目录 1. 概念 2. 服务记录(Service Record) 3. 服务属性(Service Attribute) 4. 服务类(Service Class) 5. 服务查找 5.1 UUID 5 ...

  7. CC2540 USB Dongle 使用说明

    CC2540做的USB Dongle可以烧写不同的固件从而做很多PC端的应用,下面我们来介绍下下载固件的方法和一些典型应用: 下载接口: 3V3引脚连接到CC Debugger的Target Volt ...

  8. easy UI简单使用介绍

    http://www.cnblogs.com/yokoboy/archive/2012/12/06/2806132.html

  9. 【VC6】【集成工具】将输入信息集成到VC工具中

    1.首先写一个工具,可以接受外部参数, 并且输入格式必须是固定的“"%s(%d):\n", __FILE__, __LINE__”形式. 2.编译生成EXE准备进行使用: 3.在V ...

  10. zepto-创建dom

    在使用zepto时,为了使得ajax请求回来的数据添加到页面上之后,不至于失去所绑定的事件. 我一般会采用$()创建dom元素节点,然后添加所需要的class和html等等一系列的样式,最基本的是$( ...