<!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. 怎么样打印加密PDF文件

    自然是解密后再打印.解密的方法,在linux下执行: pdf2ps xxx.pdf ps2pdf xxx.ps 参考资料 http://www.cyberciti.biz/faq/removing-p ...

  2. shell执行mysql操作

    http://ully.iteye.com/blog/1226494 http://www.jb51.net/article/55207.htm shell执行mysql操作 mysql  -hhos ...

  3. PureBasic 读取文件中一行的两个数据例子

    , "Test1.txt") ; if the file could be read, we continue... , "Test2.txt") ) = ; ...

  4. [ASP.NET] Dictionary 和 Hashtable 区别

    Dictionary和Hashtable 是两个比较常用的表示键/值的集合,两者在实际使用过程中有何区别呢? 具体区别如下: 1. Hashtable不支持泛型,而Dictionary支持泛型. 2. ...

  5. git push错误解决方案

    错误提示: error: The requested URL returned error: 403 Forbidden while accessing https://nanfei9330@gith ...

  6. yum安装node.js

    1.安装EPEL库 yum install epel-release 2.安装Node.js yum install nodejs 3.安装nodejs中常用的npm软件包管理器 yum instal ...

  7. 一本很不错的书----DOOM启示录

    强推,所有玩游戏的和做游戏的热爱游戏的都应该看看. 摘录了一些话. 盖茨不明白,为什么啊为什么,为什么一个麦斯奎特的小公司,居然能从他手下挖走迈克尔·亚伯拉什,而且仅仅凭借几个游戏就胜过了自己的软件帝 ...

  8. 关于讯飞 使用android SDK出现21001错误码的分析

    21001,没有安装语音组件1.有没有使用SpeechUtility.createUtility()设置appid2.有没有将libmsc.so放到工程中,jar包有Msc.jar.Sunflower ...

  9. 非常详细的docker学习笔记

    http://www.open-open.com/lib/view/open1423703640748.html 一.Docker 简介 Docker 两个主要部件: Docker: 开源的容器虚拟化 ...

  10. Web设计者和开发者必备的28个Chrome插件

    摘要 对于许多Web设计者和开发者来说,Firefox浏览器是无法超越的,对于其他人Chrome正在蚕食Firefox的浏览器市场. 在过去的两年,谷歌Chrome浏览器的发布以来,引起了人们激烈争论 ...