`

CSS 定义鼠标的样式

阅读更多

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;"

分享到:
评论

相关推荐

    Dreamweaver CS6中使用CSS定义链接样式.pdf

    在Dreamweaver CS6中,通过CSS定义链接样式可以让网页中的超链接拥有独特的视觉效果,提升用户体验。下面我们将详细讨论如何在Dreamweaver CS6中使用CSS定义链接的四种伪类状态,并了解如何定义局部链接样式。 1. ...

    CSS-cursor鼠标样式一览表

    总之,CSS的`cursor`属性是增强网页交互性和用户体验的重要工具,通过合理使用预定义的鼠标样式和自定义图像,开发者能够更好地引导用户在网页上进行操作。在实际开发中,应根据页面功能和设计需求,巧妙地运用这些...

    CSS样式风格定义

    } /* 点击激活链接 *//* 顶部频道文字链接的CSS定义--将顶部频道文字链接与网站链接总的CSS定义分开,以后可以制作深底浅字的格式,如果要保持原来的设计样式,将此定义内容删除或定义成与网站链接总的CSS相同即可...

    比较完整的CSS定义表格样式.zip_css

    这个压缩包中的"比较完整的CSS定义表格样式.txt"文件应该包含了更多的示例代码和详细解释,供你参考和学习。通过实践这些CSS技巧,你将能够更好地掌握如何用CSS来优化和美化HTML表格,提升网站的视觉效果和交互体验...

    DIV+CSS漂亮的样式

    在网页设计领域,`DIV+CSS`是一种广泛使用的布局技术,它通过定义不同的CSS(层叠样式表)类来控制HTML中的`<div>`元素,从而实现页面的精美设计和结构化布局。本资源包“漂亮样式CSS”包含了几个精心设计的`DIV+CSS...

    CSS3鼠标悬停图片半透明渐变颜色背景遮罩动画特效

    2. 使用CSS定义图片和遮罩的初始样式,例如设置遮罩的透明度为0,以便在未悬停时不可见。 ```css .image-container { position: relative; } .mask { position: absolute; top: 0; left: 0; width: 100%; ...

    117个图片css3鼠标经过效果

    CSS3中的`:hover`伪类选择器允许我们在鼠标指针悬停在元素上时应用特定的样式。例如,你可以改变图片的透明度、大小、边框或者添加动画效果。 2. 图片透明度变化 通过调整`opacity`属性,可以在鼠标悬停时使图片...

    网页制作鼠标样式 各种样式

    首先,我们要明白鼠标样式是通过CSS(Cascading Style Sheets)语言来定义的。CSS允许开发者自定义鼠标的外观,包括形状、大小和动画效果。基础的鼠标样式设置通常用`cursor`属性完成,例如: ```css selector { ...

    简洁的纯css3鼠标滑过按钮动画过滤样式

    "简洁的纯css3鼠标滑过按钮动画过滤样式"是一个利用CSS3特性实现的交互效果,它使得网页上的按钮在用户鼠标滑过时能呈现出动态的过滤效果,增加了用户体验的趣味性和互动性。 首先,我们要理解CSS3中的关键帧动画...

    CssButton按钮样式

    CSS允许我们定义按钮在不同状态下的样式,如:默认、鼠标悬停、激活和禁用状态。 ```css /* 默认状态 */ button { /* ... */ } /* 鼠标悬停状态 */ button:hover { background-color: #45a049; } /* 激活(按下...

    css3鼠标悬停动画

    `:hover` 是CSS中的一个选择器,用于定义当鼠标指针浮动在元素上方时应用的样式。这个伪类在鼠标悬停时触发,移开鼠标后则恢复原样。例如,我们可以为一个按钮设置:hover状态,当鼠标悬停在按钮上时,改变其背景颜色...

    css实现Word样式

    同时,通过:hover伪类实现鼠标悬停时的样式变化。 5. **图标和图像**:Word界面上的图标可以使用SVG格式的图片,因为它们具有矢量特性,可以在不同尺寸下保持清晰。我们可以使用CSS的background-image属性将SVG图片...

    arcgis for js自定义鼠标样式.zip

    在“cursor”文件可能包含了一些预定义的鼠标样式,这些样式可以通过JavaScript动态地应用到地图元素上。在ArcGIS for JS API中,可以使用`MapView`对象的`setCursor`方法来更改鼠标的样式。例如: ```javascript ...

    CSS定义鼠标经过时鼠标图形的十五种样式整理

    以上就是CSS定义鼠标经过时的十五种图形样式。这些样式能丰富用户的交互体验,使网站或应用更具吸引力和易用性。记住,合理地运用这些样式可以提升用户体验,但过度使用可能会造成干扰,因此在设计时需谨慎考虑。

    css3鼠标悬停图文卡片展示特效

    例如,我们可以使用`:hover`伪类来定义鼠标悬停时的样式变化: ```css .card .hidden { display: none; } .card:hover .hidden { display: block; transition: opacity 0.5s ease; /* 控制文字出现的过渡效果 *...

    纯CSS3鼠标经过按钮背景填充动画特效

    在这种情况下,`:hover`伪类被用来定义鼠标经过按钮时的样式变化。 3. **背景填充(background-fill)**:背景填充是指元素背景颜色或图像的填充方式。在CSS3中,可以使用`background-color`属性来设置背景色,而...

    鼠标样式包(拿去用).zip

    此压缩包内的“鼠标样式包”可能包含了CSS、JavaScript或SVG等多种格式的文件,它们用于定义和实现不同的鼠标样式。CSS(层叠样式表)文件可以用来改变鼠标的外观,通过设置`cursor`属性,我们可以轻松地更改鼠标...

    css3鼠标悬停按钮的动画

    在CSS中,`:before` 和 `:after` 伪元素用于在元素的内容前面或后面插入内容,它们默认是看不见的,但可以通过CSS定义样式使其可见。在这个案例中,我们可能使用这两个伪元素来创建按钮的边框,然后通过添加动画效果...

    好看的button样式CSS

    4. **鼠标悬停效果**:通过`:hover`伪类,可以为按钮添加鼠标悬停时的样式变化,如改变背景色或边框颜色,增加交互反馈。 5. **点击效果**:`:active`伪类可以设定按钮被按下时的样式,通常会改变按钮的背景色或...

    css鼠标移上去变手样式

    除了`pointer`外,CSS还提供了许多其他类型的鼠标样式,可以根据不同的应用场景来选择合适的样式。以下是一些常用的值: - **`default`**:默认鼠标指针。 - **`pointer`**:手形指针,常用于链接。 - **`help`**:...

Global site tag (gtag.js) - Google Analytics