css改变鼠标样式

元素的样式上加cursor:值

描述
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此光标指示可用的帮助(通常是一个问号或一个气球)。
HTML改变鼠标样式主要通过CSS的`cursor`属性来实现。以下是几种常见的改变鼠标样式的方式: ### 内联样式 可以直接在HTML标签的`style`属性中使用`cursor`属性来改变鼠标样式。例如: ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <li style="cursor: default;">我是默认的小白鼠标样式</li> <li style="cursor: pointer;">我是鼠标小手样式</li> <li style="cursor: move;">我是鼠标移动样式</li> <li style="cursor: text;">我是鼠标文本样式</li> <li style="cursor: not-allowed;">我是鼠标禁止样式</li> </body> </html> ``` 这里分别展示了默认、小手、移动、文本和禁止这几种鼠标样式,代码来源示例见引用[^2]。 ### 内部样式表 在HTML的`<style>`标签内定义样式,然后通过类名或标签名来应用`cursor`属性。示例如下: ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .aa { cursor: pointer; } </style> </head> <body> <label class="aa"> bb </label> </body> </html> ``` 在这个例子中,通过定义类名为`aa`的样式,将鼠标样式设置为小手样式,当鼠标悬停在带有`aa`类的`label`标签上时,鼠标会变成小手形状,代码来源见引用[^3]。 ### 在HTML拖拽场景中改变鼠标样式 在使用Jquery UI进行拖拽操作时,可以通过`cursorAt`选项指定光标的位置,通过`cursor`选项来自定义光标的外观。示例代码虽然未完整给出,但原理是通过提供有效的CSS光标值来设置,有效的CSS光标值包括`default`、`move`、`pointer`、`crosshair`等,如引用[^4]所述。 ### 20种可选的鼠标样式形状 在CSS中,使用`cursor`属性可以定义多种鼠标样式形状,常见的有默认、小手、移动、文本、禁止等,引用[^1]中提到可以定义20种鼠标样式形状,但未全部列举。常见的一些值及对应的鼠标样式效果如下: - `default`:默认的鼠标样式,通常是箭头。 - `pointer`:小手样式,常用于链接。 - `move`:移动样式,表明可以移动元素。 - `text`:文本样式,用于可输入文本的区域。 - `not-allowed`:禁止样式,表示操作不被允许。
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值