- 浏览: 229742 次
- 性别:
- 来自: beijing
文章分类
CSS允许你控制网页外观和布局的各个方面——包括字体、页边空白和光标。不错,从CSS 2.1开始,你就可以方便地控制用户浏览网页时使用的光标。
标准的CSS光标呈箭头状,一般来说,它都能满足一个网页或网站的需求,但有些时候你可能需要使用其它的光标。在这些情况下,CSS标准提供了众多选项。
CSS光标类型
下表概括说明了CSS标准中的一些光标类型。
默认光标:使用标准的箭头。
手状光标:光标呈手形,食指伸出。
指针状光标:与手状光标相同。
十字线光标:使用十字光标(一个加号)。
移动光标:使用十字光标,每条线末端是一个箭头。这和Windows中移动窗口时使用的光标相同。
文本光标:使用I形光标(大写字母I)。
等待光标:光标呈沙漏状。
帮助光标:使用问号光标。
e-resize:标准将这个光标定义为一个指向东方的箭头,但在多数浏览器中,显示的光标为一条两端带箭头的水平线。
w-resize:标准将这个光标定义为一个指向西方的箭头,但在多数浏览器中,显示的光标为一条两端带箭头的水平线。
ne-resize:标准将这个光标定义为一个指向东北方的箭头,但在多数浏览器中,显示的光标为一条两端带箭头的对角线。
nw-resize:标准将这个光标定义为一个指向西北方的箭头,但在多数浏览器中,显示的光标为一条两端带箭头的对角线。
se-resize:标准将这个光标定义为一个指向东南方的箭头,但在多数浏览器中,显示的光标为一条两端带箭头的对角线。
s-resize:标准将这个光标定义为一个指向南方或下方的箭头,但在多数浏览器中,显示的光标为一条两端带箭头的垂直线。
sw-resize:标准将这个光标定义为一个指向西南方的箭头,但在多数浏览器中,显示的光标为一条两端带箭头的对角线。
n-resize:标准将这个光标定义为一个指向北方或上方的箭头,但在多数浏览器中,显示的光标为一条两端带箭头的垂直线。
进展光标:光标呈沙漏状。
禁止光标:光标是一个里面带对角线的圆。
不可拖动光标:光标呈手形,右边带禁止光标。
垂直文本光标:光标呈水平I形。
三角方向光标:光标为四个箭头,中间使用一个圆点。
颜色调整光标:两条平行垂直线上画一条水平箭头,就像微软Excel中调整列大小的光标。
行调整光标:两条平等水平线上画一条垂直箭头,就像微软Excel中调整行大小的光标。
url(uri):这种光标允许你使用作为rui提交的外部文件中定义的定制光标。
eg: style="cursor: hand;"
发表评论
-
重写openalyers 的方法,加载天地图瓦片数据
2012-06-20 09:16 6360将TiandituLayer 加载到OpenLayers.js ... -
ArcGIS客户端API中加载大量数据的几种解决办法
2012-06-20 09:18 3066原文地址:http://blog.newnaw.com/?p= ... -
table_border.html
2011-01-21 17:07 930<html> <head> ... -
jquery 菜单效果一个
2010-09-26 16:02 1163<html> <head> ... -
ExtJs layout
2010-07-20 15:20 1340extjs的容器组件都可以设置它的显示风格,它的有效值有 ab ... -
验证验证
2010-05-28 15:40 929匹配中文字符的正则表 ... -
jquery validate.js x学习
2010-04-12 16:05 1255学习了 jquery validate.js ... -
学习AJAX框架后的理解
2009-11-25 14:20 1006现在很多的AJAX框架,表现的是很优秀恩 不大可能一下就 ... -
jquey中的$符号与其他框架的$的冲突解决方法
2009-11-25 12:39 1019Jquery 中的$(id)方法来获取一个元素,或者其他的一些 ... -
IE6下div不能将select框遮住
2009-11-24 13:35 1938<Fieldset style="border ... -
DHTMLX框架AJAX
2009-11-20 17:28 1380在项目中用了下Dhtml的Grid,一直都没有仔细的 ... -
关于页面的传值
2009-11-20 10:46 1108有两个页面,父页面与子页面,父页面要传一个参数给子页面, ... -
jQuery 的CSS属性
2009-11-15 16:06 6614CSS属性的设定, 可以用预先定义的 CSS样式,使用$ ... -
jQuery 理解
2009-11-15 14:10 1180jquery this的含义 在触发事件的时候,是指向原生态 ... -
jquery理解
2009-11-11 10:24 1098下载好后引用这个jQuery库就可以了我们的jQuery开发了 ... -
内存泄露与闭包
2009-11-05 17:34 1622JavaScript 编程来说,内存泄露是一个很潜在的危险,主 ... -
JavaScript的跨域问题
2009-11-05 17:03 1611可能是经过的项目少,还没有经历过跨域问题,于是收集点跨 ... -
使用dtmlxGrid 未知运行的错误。与显示不出来的情况
2009-09-22 16:05 955ie4,ie6,ie7 环境下会出现这个错误, 原因 gri ... -
javaScript 中 call 函数与apply的用法说明
2009-09-11 10:44 1507call 的用法 javaScript 中的 call ... -
javascript 中this 的用法
2009-09-09 14:14 988在面向对象编程语言中,对于this关键字我们是非常熟悉的。比如 ...
相关推荐
在Dreamweaver CS6中,通过CSS定义链接样式可以让网页中的超链接拥有独特的视觉效果,提升用户体验。下面我们将详细讨论如何在Dreamweaver CS6中使用CSS定义链接的四种伪类状态,并了解如何定义局部链接样式。 1. ...
总之,CSS的`cursor`属性是增强网页交互性和用户体验的重要工具,通过合理使用预定义的鼠标样式和自定义图像,开发者能够更好地引导用户在网页上进行操作。在实际开发中,应根据页面功能和设计需求,巧妙地运用这些...
} /* 点击激活链接 *//* 顶部频道文字链接的CSS定义--将顶部频道文字链接与网站链接总的CSS定义分开,以后可以制作深底浅字的格式,如果要保持原来的设计样式,将此定义内容删除或定义成与网站链接总的CSS相同即可...
这个压缩包中的"比较完整的CSS定义表格样式.txt"文件应该包含了更多的示例代码和详细解释,供你参考和学习。通过实践这些CSS技巧,你将能够更好地掌握如何用CSS来优化和美化HTML表格,提升网站的视觉效果和交互体验...
在网页设计领域,`DIV+CSS`是一种广泛使用的布局技术,它通过定义不同的CSS(层叠样式表)类来控制HTML中的`<div>`元素,从而实现页面的精美设计和结构化布局。本资源包“漂亮样式CSS”包含了几个精心设计的`DIV+CSS...
2. 使用CSS定义图片和遮罩的初始样式,例如设置遮罩的透明度为0,以便在未悬停时不可见。 ```css .image-container { position: relative; } .mask { position: absolute; top: 0; left: 0; width: 100%; ...
CSS3中的`:hover`伪类选择器允许我们在鼠标指针悬停在元素上时应用特定的样式。例如,你可以改变图片的透明度、大小、边框或者添加动画效果。 2. 图片透明度变化 通过调整`opacity`属性,可以在鼠标悬停时使图片...
首先,我们要明白鼠标样式是通过CSS(Cascading Style Sheets)语言来定义的。CSS允许开发者自定义鼠标的外观,包括形状、大小和动画效果。基础的鼠标样式设置通常用`cursor`属性完成,例如: ```css selector { ...
"简洁的纯css3鼠标滑过按钮动画过滤样式"是一个利用CSS3特性实现的交互效果,它使得网页上的按钮在用户鼠标滑过时能呈现出动态的过滤效果,增加了用户体验的趣味性和互动性。 首先,我们要理解CSS3中的关键帧动画...
CSS允许我们定义按钮在不同状态下的样式,如:默认、鼠标悬停、激活和禁用状态。 ```css /* 默认状态 */ button { /* ... */ } /* 鼠标悬停状态 */ button:hover { background-color: #45a049; } /* 激活(按下...
`:hover` 是CSS中的一个选择器,用于定义当鼠标指针浮动在元素上方时应用的样式。这个伪类在鼠标悬停时触发,移开鼠标后则恢复原样。例如,我们可以为一个按钮设置:hover状态,当鼠标悬停在按钮上时,改变其背景颜色...
同时,通过:hover伪类实现鼠标悬停时的样式变化。 5. **图标和图像**:Word界面上的图标可以使用SVG格式的图片,因为它们具有矢量特性,可以在不同尺寸下保持清晰。我们可以使用CSS的background-image属性将SVG图片...
在“cursor”文件可能包含了一些预定义的鼠标样式,这些样式可以通过JavaScript动态地应用到地图元素上。在ArcGIS for JS API中,可以使用`MapView`对象的`setCursor`方法来更改鼠标的样式。例如: ```javascript ...
- `cursor`: 定义鼠标悬停在元素上时的光标形状,常用值有`default`、`pointer`、`text`等。 - `filter`: 提供了一种方法来为元素的应用或更改效果,如模糊和颜色偏移。 这个文档涵盖了诸多CSS属性和它们的作用,...
以上就是CSS定义鼠标经过时的十五种图形样式。这些样式能丰富用户的交互体验,使网站或应用更具吸引力和易用性。记住,合理地运用这些样式可以提升用户体验,但过度使用可能会造成干扰,因此在设计时需谨慎考虑。
例如,我们可以使用`:hover`伪类来定义鼠标悬停时的样式变化: ```css .card .hidden { display: none; } .card:hover .hidden { display: block; transition: opacity 0.5s ease; /* 控制文字出现的过渡效果 *...
在这种情况下,`:hover`伪类被用来定义鼠标经过按钮时的样式变化。 3. **背景填充(background-fill)**:背景填充是指元素背景颜色或图像的填充方式。在CSS3中,可以使用`background-color`属性来设置背景色,而...
此压缩包内的“鼠标样式包”可能包含了CSS、JavaScript或SVG等多种格式的文件,它们用于定义和实现不同的鼠标样式。CSS(层叠样式表)文件可以用来改变鼠标的外观,通过设置`cursor`属性,我们可以轻松地更改鼠标...
在CSS中,`:before` 和 `:after` 伪元素用于在元素的内容前面或后面插入内容,它们默认是看不见的,但可以通过CSS定义样式使其可见。在这个案例中,我们可能使用这两个伪元素来创建按钮的边框,然后通过添加动画效果...
4. **鼠标悬停效果**:通过`:hover`伪类,可以为按钮添加鼠标悬停时的样式变化,如改变背景色或边框颜色,增加交互反馈。 5. **点击效果**:`:active`伪类可以设定按钮被按下时的样式,通常会改变按钮的背景色或...