[CSS揭秘]鼠标光标

鼠标指针可以用来告诉用户当前可以执行什么动作

目前已有的内置光标种类有:

crosshair help move pointer progress text wait e-resize
ne-resize nw-resize n-resize se-resize sw-resize s-resize w-resize none
context-menu cell vertical-text alias copy no-drop not-allowed ew-resize
ns-resize nesw-resize nwse-resize col-resize row-resize all-resize zoom-in
zoom-out

介绍几种常用光标

1. 提示禁用状态

not-allowed用于提示某个控件因为某种原因无法进行交互，常常用于表单

:disabled, [disabled], [aria-disabled=‘true‘]{

　　cursor: not-allowed;

}

2. 隐藏鼠标光标

比如公共场所的信息查询台，娱乐平台需要合适的隐藏鼠标光标，带来可用性提升。

video{

　　cursor: none;

}

3. 缩放光标

现在提供了几种新的缩放光标，分别是 ew-resize, ns-resize, nesw-resize, nwse-resize

常常用于自定义缩放元素的边界上

时间： 2024-12-13 23:29:08

[CSS揭秘]鼠标光标的相关文章

用Css定义不同的鼠标光标样式

系统光标大家再熟悉不过了,熟悉的甚至忘了它们的存在.用CSS我们可以将这些光标一一展现出来,本例将展现给大家用CSS实现拖动符的光标.链接小手.移动光标.带问号的光标.不可操作的光标.小手光标.带运行符的光标.上下拖动的光标.普通打字光标.竖向排行的文字光标.系统忙的光标等. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xh

css cursor鼠标指针光标样式default pointer hand url

我们在DIV CSS布局时候,我们会遇到对对象内鼠标指针光标进行控制,比如鼠标经过指针变为手指形状等样式,接下来我们介绍鼠标指针样式cursor控制.系统默认鼠标指针样式外,可以通过CSS设置图片为鼠标指针,常见有些网站鼠标指针是各种各样小图片样式,当然这个是通过css cursor设置鼠标样式. 详见网站介绍:http://www.divcss5.com/rumen/r427.shtml css cursor鼠标指针光标样式default pointer hand url,布布扣,bubuko

css揭秘--笔记（未完）

第0章 关于本书 1, 本书要用到一个工具函数————$$(),它可以让我们更容易获取和遍历所有匹配特定css选择符的dom元素: 1 function $$(selector,context){ 2 context=context||document; 3 var elements=context.querySelectorAll(selector); 4 return Array.prototype.slice.call(elements); 5 } 2, 以下实现一个效果: 1 linea

自定义鼠标光标cursor

通过css属性 Cursor:url()自定义鼠标光标 {cursor:url('图标路径'),default;} url是自定义鼠标图标路径 default指的是定义默认的光标(通常是一个箭头),以防没有由 URL 定义的可用光标. 图标的格式根据不同的浏览器来分: IE支持cur,ani,ico这三种格式. Google,FF支持bmp,gif,jpg,cur,ico这几种格式,不 支持ani格式,也不支持gif动画格式. 在项目中,用到自定义鼠标样式遇到的问题: IE浏览器下图标地址需要为

CSS自定义鼠标指针样式

原文链接: http://davidwalsh.name/css-custom-cursorDemo地址: http://davidwalsh.name/demo/css-custom-cursor.php原文日期: 2014-09-16翻译日期: 2014-09-17翻译人员: 铁锚 还记得Web 1.0时代的那些苦逼岁月吗? 你想尽一切办法来优化你的网站. 还要饱受IE6惨无人道的虐待,举个栗子, IE中那些害死人不偿命的滚动条, 我一直记得第三方类库 CometCursor. CometC

可编辑DIV （contenteditable=&quot;true&quot;） 在鼠标光标处插入图片或者文字

近期需开发一个DIV做的编辑器,插入表情图片可直接预览效果,仔细参考了下百度贴吧的过滤粘贴过来文件的THML代码,自己整理了下.写出来只是和大家分享下,我自己也不大懂,经过努力,幸好搞定. 蛋疼的事情出来了,当编辑框失去焦点时候,再插入图片时候总是插入在最前面(谷歌和火狐,IE没问题).还没搞定,,, <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/

CSS揭秘

第1章 引言 第2章 背景与边框 第3章 形状 第4章 视觉效果 第5章 字体排印 第6章 用户体验 第7章 结构与布局 第8章 过渡与动画 第1章 引言 Web标准:是敌还是友 CSS编码技巧 第2章 背景与边框 1 半透明边框 2 多重边框 3 灵活的背景定位 4 边框内圆角 5 条纹背景 6 复杂的背景图案 7 伪随机背景 8 连续的图像边框 第3章 形状 9 自适应的椭圆 10 平行四边形 11 菱形图片 12 切角效果 13 梯形标签页 14 简单的饼图 第4章 视觉效果 15 单侧投

兄弟连教育分享：用CSS实现鼠标悬停提示的方法

本文,兄弟连HTML5培训 ,分享了纯CSS实现鼠标悬停提示的方法.给大家供大家参考.具体分析如下: 这是一款比较漂亮的鼠标悬停提示效果,用纯CSS代码实现,鼠标放到图片上会显示一个层,也就是悬停时的提示,在这个提示框内你还可以加入图片或是一个列表,这就靠你的发挥了,提示框的背景颜色和文字颜色你都可以自己调. 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTDXHTML 1.0 Transitional//EN""http://www.w3

[css 揭秘]：CSS揭秘 技巧（四）：边框内圆角

我的github地址:https://github.com/FannieGirl/ifannie/ 源码都在这上面哦! 喜欢的给我一个星吧 边框内圆角 问题:有时候我们需要一个容器,只在内侧有圆角,而边框或描边的四个角在外部仍然保持直角的形状. 其实,以前我都是用两个div实现的. 解决方案 如果只需要达成简单的实色效果,我们还可以通过其他的方法. 描边 并不会跟着元素的圆角走(因而可以实现外层是直角),box-shadow 却是会的,因此把两者叠加到一起,box-shadow 会刚好填补 描边