`
流浪鱼
  • 浏览: 1692843 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

css cursor 设置

阅读更多

      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下不能显示成手

分享到:
评论

相关推荐

    CSS-cursor鼠标样式一览表

    其中,`cursor`属性是CSS中的一个重要特性,它允许开发者自定义鼠标指针在不同元素上显示的样式。本篇文章将详细阐述`cursor`属性的使用及其各种预定义的鼠标样式。 `cursor`属性主要用于改变用户在页面上的交互...

    鼠标特效css的cursor属性

    ### 鼠标特效CSS的Cursor属性详解 在网页设计与开发中,为了提升用户体验以及增强网站的互动性,开发者经常需要对网站进行各种细节优化。其中,利用CSS中的`cursor`属性来改变鼠标指针样式就是一种常见的优化手段。...

    css cursor 的可选值(鼠标的各种样式)

    CSS中的`cursor`属性用于控制鼠标指针在页面上的显示样式。这个属性允许开发者根据不同的交互情况设置不同的鼠标光标,以提供更好的用户体验和视觉反馈。以下是对标题和描述中提到的一些`cursor`可选值的详细解释: ...

    前端开源库-css-cursor

    在前端开发中,CSS(Cascading Style Sheets)是用于控制网页元素样式的重要技术,而“cursor”属性则是CSS中的一个重要部分,它定义了用户在鼠标指针位于元素上时的光标形状。"css-cursor"是一个开源库,专注于规范...

    举例详解CSS中的cursor属性

    在CSS中,`cursor`属性是一个非常有用的功能,它允许我们改变用户在页面上移动鼠标时看到的指针样式。本文主要介绍了两个实用的`cursor`属性组合:`zoom-in/zoom-out`和`grab/grabbing`,它们极大地增强了用户体验,...

    CSS设置表格和表单样式PPT课件.pptx

    CSS 设置表格和表单样式 PPT 课件 本资源为一份关于 CSS 设置表格和表单样式的 PPT 课件,共 6 页,涵盖了控制表格、表格实例一:隔行变色、CSS 与表单、直接输入的 Excel 表格等内容。 第六课:CSS 设置表格和...

    css常用代码大全(html+css代码).pdf

    最后,`cursor`属性可以改变鼠标指针的形状,例如`cursor:hand`设置成手形,适用于链接,`cursor:wait`显示等待沙漏,等等。 这些只是CSS的一部分基础知识,实际应用中还有更复杂的布局技术,如响应式设计、Flexbox...

    CSS设置选中网页文字时的背景和颜色

    网页中文字的选中效果是页面交互中非常常见的一种状态,CSS提供了方式让我们可以自定义文字选中时的样式,使得用户界面更加友好和符合设计要求。 首先,我们来了解浏览器对于文字选中样式的默认显示效果。当用户在...

    CSS经典圆形按钮

    首先,创建一个圆形按钮的基础结构,我们需要一个HTML元素,如`&lt;button&gt;`或`&lt;a&gt;`,并为其添加一个类名以便于在CSS中进行样式设置。例如: ```html 点击我 ``` 接下来,我们用CSS来实现圆形按钮的样式。最基本的...

    全新代码编辑器 Cursor Linux版本0.1.11

    8. **自定义设置**:Cursor编辑器允许用户根据个人喜好自定义界面主题、快捷键、字体大小等,以适应不同开发者的工作习惯。 9. **插件系统**:Cursor可能拥有强大的插件生态系统,用户可以通过安装各种插件扩展其...

    光标形状 html css css知识 网页知识

    CSS提供了`cursor`属性,用于定义鼠标指针在元素上时显示的形状。例如,如果你想让鼠标在某个元素上变为手型,你可以这样编写CSS代码: ```css selector { cursor: pointer; } ``` 这里的`selector`是你希望应用此...

    css,div+css.docx

    - `cursor` 用于设置鼠标光标的形状,如`default`, `hand`, `pointer`等。 【Div+CSS布局】 Div常用于构建网页的结构,通过CSS控制其宽高、位置和样式。例如: ```css Div{ Width:80px; Height:25px; ...

    css常见考题 !!css常见考题 css常见考题

    - 通过CSS设置`scrollbar-*`属性来自定义滚动条样式。 - **示例代码:** ```css body { scrollbar-face-color: #f6f6f6; scrollbar-highlight-color: #fff; scrollbar-shadow-color: #eeeeee; scrollbar-3...

    css 属性一览表

    - **cursor**: 设置光标的样式。例如: - `cursor: crosshair;`:设置为十字形光标。 - `cursor: s-resize;`:设置为垂直调整大小的光标。 - `cursor: help;`:设置为帮助提示的光标,通常带有一个问号。 - `...

    CSS教程 非常好用

    **10.1 CSS cursor属性** - 设置光标样式。 ```css p:hover { cursor: pointer; } ``` #### 十一、CSS边框 **11.1 CSS border-width属性** - 设置边框宽度。 ```css p { border-width: 1px; } ``` **...

    用css把a链接模拟成button的样子的方法

    3. **`cursor`**:当鼠标悬停在链接上时显示的手形图标,设置为`pointer`使得它看起来更像一个可点击的按钮。 4. **`background-color`**:设置背景颜色。 5. **`text-align`**:文本对齐方式。这里设置为中心对齐,...

    css美化滚动条

    4. `cursor`:定义鼠标悬停在滚动条上时的光标形状。 5. `::webkit-scrollbar-thumb:hover`:当鼠标悬停在滑块上时,可以定义不同的样式。 6. `::webkit-scrollbar-thumb:active`:滑块被按下时的样式。 7. `::...

    CssButton按钮样式

    例如,我们可以设置按钮的颜色、大小、边框和字体样式: ```css button { background-color: #4CAF50; /* 背景色 */ border: none; /* 无边框 */ color: white; /* 字体颜色 */ padding: 15px 32px; /* 内边距 ...

    常用控件CSS样式

    比如,可以使用`color`和`background-color`属性设置文本和背景颜色,以及`border-color`来定义边框颜色。同时,`box-shadow`属性可以用来添加微妙的阴影效果,增加元素的立体感,尽管在Flat UI中这种效果通常较弱或...

Global site tag (gtag.js) - Google Analytics