hand:是手型。
crosshair:是十字型,就是小乌龟首页所用的样式。
text:是平时鼠标移动到文本上的样式。
wait:是等待的效果。
default:是默认的那种效果。
help:是带问号的鼠标样式。
e-resize:是向右的箭头。
ne-resize:是向右上方的箭头。
n-resize:是向上的箭头。
nw-resize:是向左上方的箭头。
w-resize:是向左的箭关。
sw-resize:是向左下的箭头。
s-resize:是向下的箭头。
se-resize:是向右下方的箭头。
auto:是系统自动的效果。
当然根据需要你也可以将样式应用于其它标签,或者单纯的只应用于某一段文本。如果读者对CSS代码不陌生的话,或许直接手写代码更方便。特别是,如果你想在不同的位置运用不同的鼠标样式,或者不同的标签使用不同的鼠标样式。直接将样式写在某个具体的标签里边就可以了。
方法是:< tag style=cursor:mouse_style>。其中tag是标签名,mouse_style就是鼠标样式,如hand/crosshair/text/wait等等。
下面举个具体的实例以加深大家对鼠标样式设置的理解。
<span style=cursor:hand> hand:是大家所熟悉的手型。< /span>
< span style=cursor:crosshair>crosshair:是十字型,就是小乌龟首页所用的样式。< /span>
< span style=cursor:text>text:是平时鼠标移动到文本上的样式。< /span>
< span style=cursor:wait>wait:是等待的效果。< /span>
< span style=cursor:default>default:是默认的那种效果。< /span>
< span style=cursor:help>help:是带问号的鼠标样式。< /span>
< span style=cursor:e-resize>e-resize:是向右的箭头。< /span>
< span style=cursor:ne-resize>ne-resize:是向右上方的箭头。< /span>
< span style=cursor:n-resize>n-resize:是向上的箭头。< /span>
< span style=cursor:nw-resize>nw-resize:是向左上方的箭头。< /span>
< span style=cursor:w-resize>w-resize:是向左的箭关。< /span>
< span style=cursor:sw-resize>sw-resize:是向左下的箭头。< /span>
< span style=cursor:s-resize>s-resize:是向下的箭头。< /span>
< span style=cursor:se-resize>se-resize:是向右下方的箭头。< /span>
< span style=cursor:auto>auto:是系统自动的效果。< /span>
注意:
在ie下设置 css 样式 style="cursor:hand;" 可以正常显示
但是在firefox下就不行
改用 style="cursor:pointer;"
则在两个浏览器下都能正常显示
但只适用于IE6.0及以上版本以及FIREFOX,在IE5.0下不能显示成手
分享到:
相关推荐
其中,`cursor`属性是CSS中的一个重要特性,它允许开发者自定义鼠标指针在不同元素上显示的样式。本篇文章将详细阐述`cursor`属性的使用及其各种预定义的鼠标样式。 `cursor`属性主要用于改变用户在页面上的交互...
### 鼠标特效CSS的Cursor属性详解 在网页设计与开发中,为了提升用户体验以及增强网站的互动性,开发者经常需要对网站进行各种细节优化。其中,利用CSS中的`cursor`属性来改变鼠标指针样式就是一种常见的优化手段。...
CSS中的`cursor`属性用于控制鼠标指针在页面上的显示样式。这个属性允许开发者根据不同的交互情况设置不同的鼠标光标,以提供更好的用户体验和视觉反馈。以下是对标题和描述中提到的一些`cursor`可选值的详细解释: ...
在前端开发中,CSS(Cascading Style Sheets)是用于控制网页元素样式的重要技术,而“cursor”属性则是CSS中的一个重要部分,它定义了用户在鼠标指针位于元素上时的光标形状。"css-cursor"是一个开源库,专注于规范...
在CSS中,`cursor`属性是一个非常有用的功能,它允许我们改变用户在页面上移动鼠标时看到的指针样式。本文主要介绍了两个实用的`cursor`属性组合:`zoom-in/zoom-out`和`grab/grabbing`,它们极大地增强了用户体验,...
CSS 设置表格和表单样式 PPT 课件 本资源为一份关于 CSS 设置表格和表单样式的 PPT 课件,共 6 页,涵盖了控制表格、表格实例一:隔行变色、CSS 与表单、直接输入的 Excel 表格等内容。 第六课:CSS 设置表格和...
最后,`cursor`属性可以改变鼠标指针的形状,例如`cursor:hand`设置成手形,适用于链接,`cursor:wait`显示等待沙漏,等等。 这些只是CSS的一部分基础知识,实际应用中还有更复杂的布局技术,如响应式设计、Flexbox...
网页中文字的选中效果是页面交互中非常常见的一种状态,CSS提供了方式让我们可以自定义文字选中时的样式,使得用户界面更加友好和符合设计要求。 首先,我们来了解浏览器对于文字选中样式的默认显示效果。当用户在...
首先,创建一个圆形按钮的基础结构,我们需要一个HTML元素,如`<button>`或`<a>`,并为其添加一个类名以便于在CSS中进行样式设置。例如: ```html 点击我 ``` 接下来,我们用CSS来实现圆形按钮的样式。最基本的...
8. **自定义设置**:Cursor编辑器允许用户根据个人喜好自定义界面主题、快捷键、字体大小等,以适应不同开发者的工作习惯。 9. **插件系统**:Cursor可能拥有强大的插件生态系统,用户可以通过安装各种插件扩展其...
CSS提供了`cursor`属性,用于定义鼠标指针在元素上时显示的形状。例如,如果你想让鼠标在某个元素上变为手型,你可以这样编写CSS代码: ```css selector { cursor: pointer; } ``` 这里的`selector`是你希望应用此...
- `cursor` 用于设置鼠标光标的形状,如`default`, `hand`, `pointer`等。 【Div+CSS布局】 Div常用于构建网页的结构,通过CSS控制其宽高、位置和样式。例如: ```css Div{ Width:80px; Height:25px; ...
- 通过CSS设置`scrollbar-*`属性来自定义滚动条样式。 - **示例代码:** ```css body { scrollbar-face-color: #f6f6f6; scrollbar-highlight-color: #fff; scrollbar-shadow-color: #eeeeee; scrollbar-3...
- **cursor**: 设置光标的样式。例如: - `cursor: crosshair;`:设置为十字形光标。 - `cursor: s-resize;`:设置为垂直调整大小的光标。 - `cursor: help;`:设置为帮助提示的光标,通常带有一个问号。 - `...
**10.1 CSS cursor属性** - 设置光标样式。 ```css p:hover { cursor: pointer; } ``` #### 十一、CSS边框 **11.1 CSS border-width属性** - 设置边框宽度。 ```css p { border-width: 1px; } ``` **...
3. **`cursor`**:当鼠标悬停在链接上时显示的手形图标,设置为`pointer`使得它看起来更像一个可点击的按钮。 4. **`background-color`**:设置背景颜色。 5. **`text-align`**:文本对齐方式。这里设置为中心对齐,...
4. `cursor`:定义鼠标悬停在滚动条上时的光标形状。 5. `::webkit-scrollbar-thumb:hover`:当鼠标悬停在滑块上时,可以定义不同的样式。 6. `::webkit-scrollbar-thumb:active`:滑块被按下时的样式。 7. `::...
例如,我们可以设置按钮的颜色、大小、边框和字体样式: ```css button { background-color: #4CAF50; /* 背景色 */ border: none; /* 无边框 */ color: white; /* 字体颜色 */ padding: 15px 32px; /* 内边距 ...
比如,可以使用`color`和`background-color`属性设置文本和背景颜色,以及`border-color`来定义边框颜色。同时,`box-shadow`属性可以用来添加微妙的阴影效果,增加元素的立体感,尽管在Flat UI中这种效果通常较弱或...