CSS中设置鼠标样式

2022-09-04 12:44:15 浏览数 (1)

大家好,又见面了,我是你们的朋友全栈君。

cursor规则是设定网页浏览时用户鼠标指针的样式,也就是鼠标的图形形状

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

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

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

定义和用法

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

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

默认值:

auto

继承性:

yes

版本:

CSS2

JavaScript 语法:

object.style.cursor=”crosshair”

可能的值

描述

default

默认光标(通常是一个箭头)

auto

默认。浏览器设置的光标。

crosshair

光标呈现为十字线。

pointer

光标呈现为指示链接的指针(一只手)

move

此光标指示某对象可被移动。

e-resize

此光标指示矩形框的边缘可被向右(东)移动。

ne-resize

此光标指示矩形框的边缘可被向上及向右移动(北/东)。

nw-resize

此光标指示矩形框的边缘可被向上及向左移动(北/西)。

n-resize

此光标指示矩形框的边缘可被向上(北)移动。

se-resize

此光标指示矩形框的边缘可被向下及向右移动(南/东)。

sw-resize

此光标指示矩形框的边缘可被向下及向左移动(南/西)。

s-resize

此光标指示矩形框的边缘可被向下移动(南)。

w-resize

此光标指示矩形框的边缘可被向左移动(西)。

text

此光标指示文本。

wait

此光标指示程序正忙(通常是一只表或沙漏)。

help

此光标指示可用的帮助(通常是一个问号或一个气球)。

使用方法

代码语言:javascript复制
.span {
    cursor:pointer //设定鼠标的形状为一只伸出食指的手,这也是绝大多数浏览器里面鼠标停留在网页链接上方时候的样式
}
.span {
    cursor:default //设定鼠标的形状为箭头,,crosshair 十字,progress 箭头和沙漏等等
}

发布者:全栈程序员栈长,转载请注明出处:https://javaforall.cn/138206.html原文链接:https://javaforall.cn

0 人点赞