`

利用CSS的cursor属性 改变光标形状

阅读更多
<td title="${log.OUTPARAMS}" <c:if test="${not empty log.OUTPARAMS }">style="cursor:pointer"</c:if> >${log.FDESC}</td>

 

 

转至:http://www.w3school.com.cn/cssref/pr_class_cursor.asp

 

CSS cursor 属性

实例

一些不同的光标:

span.crosshair {cursor:crosshair;}
span.help {cursor:help;}
span.wait {cursor:wait;}

亲自试一试

浏览器支持

IE Firefox Chrome Safari Opera
         

所有主流浏览器都支持 cursor 属性。

注释:Opera 9.3 和 Safari 3 不支持 url 值。

注释:任何版本的 Internet Explorer (包括 IE8)都不支持属性值 "inherit"。

定义和用法

cursor 属性规定要显示的光标的类型(形状)。

该属性定义了鼠标指针放在一个元素边界范围内时所用的光标形状(不过 CSS2.1 没有定义由哪个边界确定这个范围)。

默认值: 继承性: 版本: JavaScript 语法:
auto
yes
CSS2
object.style.cursor="crosshair"

可能的值

值 描述
url

需使用的自定义光标的 URL。

注释:请在此列表的末端始终定义一种普通的光标,以防没有由 URL 定义的可用光标。

default 默认光标(通常是一个箭头)
auto 默认。浏览器设置的光标。
crosshair 光标呈现为十字线。
pointer 光标呈现为指示链接的指针(一只手)
move 此光标指示某对象可被移动。
e-resize 此光标指示矩形框的边缘可被向右(东)移动。
ne-resize 此光标指示矩形框的边缘可被向上及向右移动(北/东)。
nw-resize 此光标指示矩形框的边缘可被向上及向左移动(北/西)。
n-resize 此光标指示矩形框的边缘可被向上(北)移动。
se-resize 此光标指示矩形框的边缘可被向下及向右移动(南/东)。
sw-resize 此光标指示矩形框的边缘可被向下及向左移动(南/西)。
s-resize 此光标指示矩形框的边缘可被向下移动(南)。
w-resize 此光标指示矩形框的边缘可被向左移动(西)。
text 此光标指示文本。
wait 此光标指示程序正忙(通常是一只表或沙漏)。
help 此光标指示可用的帮助(通常是一个问号或一个气球)。

TIY 实例

改变光标
本例演示如何改变光标。

 

 

 

 

 

 

分享到:
评论

相关推荐

    CSS-cursor鼠标样式一览表

    `cursor`属性主要用于改变用户在页面上的交互体验,通过调整鼠标光标形状,可以给用户提供更明确的操作提示。例如,当用户将鼠标悬停在可点击的链接或可拖动的元素上时,可以显示不同的鼠标指针,从而提高用户体验。...

    unity3d改变鼠标的样式 设置光标形状

    例如,你可以将光标图像保存在WebGL构建的资源中,并通过JavaScript访问这些资源,然后用CSS设置网页的cursor属性。 ```javascript function setCursor(url) { document.body.style.cursor = 'url(' + url + ') 8 ...

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

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

    CSS中cursor属性的鼠标样式明细

    在CSS中,cursor属性用于定义鼠标悬停在元素上方时显示的光标样式。光标样式可以影响用户的交互体验,使网页的导航和操作更加直观和友好。以下详述了CSS中cursor属性所包含的一些常见鼠标样式,并解释了它们的用途。...

    css3鼠标悬停动画

    例如,同时改变元素的颜色、大小、形状,甚至使用`filter`属性改变其视觉效果,如模糊、饱和度等。 六、自定义鼠标光标 除了动画效果,CSS3还允许我们自定义鼠标指针的形状,通过`cursor`属性实现。这可以进一步...

    asp.net中更改光标形状

    光标形状的修改通常涉及到CSS(层叠样式表)的使用,通过设置特定的CSS属性,可以轻松地改变网页元素上的鼠标光标显示。 ### ASP.NET中更改光标形状的方法 #### CSS应用 在ASP.NET中,我们可以通过内联样式或外部...

    根据需要随意更换鼠标形状

    在JavaScript中,可以使用CSS的cursor属性来定制网页中的鼠标形状。 总的来说,"根据需要随意更换鼠标形状"不仅是一种视觉上的改进,也是一种功能性的拓展,能够帮助用户更好地理解系统的当前状态,提高操作效率。...

    如何用CSS自定义鼠标显示的形状?.rar

    介绍: 我们在网页设计的时候,为了达到个性效果,需要将系统默认的鼠标形状改变掉,自宝义鼠标显示的形状,我们...CSS有一个属性:cursor,其作用是设置或检索在对象上移动的鼠标指针采用何种系统预定义的光标形状。

    前端开源库-css-cursor

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

    cursor鼠标指针图片连接

    总的来说,"Cursor鼠标指针图片连接"是一个关于HTML和CSS中如何利用`cursor`属性实现个性化鼠标指针样式的知识点。通过灵活运用这个属性,设计师可以为网站创造出独特的交互体验,提高用户的参与度和满意度。

    js改变鼠标的形状和样式.pdf

    在HTML中,我们可以通过CSS(Cascading Style Sheets)来设置元素的`cursor`属性来改变鼠标的形状。例如,`cursor: pointer`会让鼠标显示为手形,表明该元素可点击。以下是一些常见的鼠标样式: 1. `auto` - 默认的...

    css属性继承

    5. **cursor**:设置鼠标光标在元素上显示的形状。 6. **direction**:设置文本的方向/书写方向。 7. **empty-cells**:规定是否显示表格中的空单元格。 8. **font**:定义一系列字体相关的属性,如`font-family`、`...

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

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

    CSS属性查询以及用法

    * Cursor:定义鼠标指针的形状,例如 default、hand 等。 其他属性 * Float:定义元素的浮动方式。 * Clear:定义元素的清除方式。 * Overflow:定义元素的溢出方式。 * Visibility:定义元素的可见性。 * Z-index...

    Cursordemo鼠标指针形状

    在JavaScript中,我们可以监听鼠标的移动事件,当鼠标移动到特定区域时,改变`cursor`属性的值。这样的功能可能需要配合DOM操作,例如使用`addEventListener`添加事件监听器,并在事件处理函数中进行逻辑判断。 接...

    js改变鼠标的形状和样式的方法

    在CSS中,为元素设置cursor属性可以改变鼠标指针的形状。cursor属性接受多种预设值,如default、pointer、move、text、wait、crosshair等。这些值代表不同的鼠标指针形状,对应着不同的交互含义。比如,pointer常...

    cursor:鼠标样式定义

    通过CSS中的`cursor`属性,开发者可以轻松地改变用户在页面上看到的鼠标指针样式,以此来传达不同的交互信息或增强视觉效果。 #### 一、`cursor`属性简介 `cursor`属性用于定义当用户的鼠标光标悬停在某个元素上时...

    css鼠标移上去变手样式

    当我们希望鼠标悬停在某个元素(如链接)上时显示为手形指针,可以利用CSS中的`cursor`属性来轻松达成这一效果。以下将对这一知识点进行详细介绍: ### CSS中的`cursor`属性 `cursor`属性用于定义鼠标指针形状。在...

    CSS style属性大全.rar

    - `cursor`: 自定义鼠标光标形状。 通过学习"CSS style属性大全"这份教程,你可以深入了解并熟练运用这些属性,从而更好地掌控网页的视觉呈现和用户体验。同时,别忘了实践是检验真理的唯一标准,理论学习后要多...

    css属性表,非常详细

    - **cursor**:鼠标悬停时的光标形状,如`auto`、`crosshair`、`default`、`pointer`等。 以上属性仅为CSS庞大体系中的一部分,掌握它们能够显著提升网页设计的灵活性和美观度。CSS的强大之处在于其组合性和扩展性...

Global site tag (gtag.js) - Google Analytics