HTML网页光标的问题

HTML网页光标的问题,第1张

有一个属性叫cursor

例如给一个标签设置:

#example{

cursor:pointer

}

你试试看效果,后面的内容可以修改为你想要的。

补充:

那你给body设置啊。你试试看。

焦点在HTML和JS中是只光标

焦点在JS和HTML里是在页面上屏幕中闪动的小竖线,鼠标点击就可获得光标,Tab键可按照设置的Tabindex来进行切换焦点。

示例:

<divid="demo"></div>

<divid="test"></div>

<divid="one"></div>

<divid="two"></div>

<divid="three"></div>

<divid="fore"></div>

<divid="five"></div>

<divid="six"></div>

<script>

function$(id){

returndocument.getElementById(id)

}

$("demo").style.backgroundColor="green"

//调用方法

$("test").style.backgroundColor="blue"

$("one").style.backgroundColor="orange"

$("two").style.backgroundColor="red"

$("three").style.backgroundColor="purple"

$("fore").style.backgroundColor="#f6e71f"

$("five").style.backgroundColor="#5153ff"

$("six").style.backgroundColor="#ff1496"

//调用函数,并直接修改盒子的背景颜色

扩展资料

jquery判断input输入框的值

//输入框正在输入时

$("#ipt").on('input',function(){

if(!($('#ipt').val()=='')){

$(".cancle_ico").removeClass('hide')

}else{

$(".cancle_ico").addClass('hide')

}

})

//输入框得到焦点时

$("#ipt").on('focus',function(){

if(!($('#ipt').val()=='')){

$(".cancle_ico").removeClass('hide')

}else{

$(".cancle_ico").addClass('hide')

}

})

//输入框失去焦点时

$("#ipt").on('blur',function(){

if(($('#ipt').val()=='')){

$(".cancle_ico").addClass('hide')

}else{

$(".cancle_ico").removeClass('hide')

}

})

用a标签的

style中的

cursor

属性。如:<a

href="#"

style="cursor:help">这个是带问号的</a><br><a

href="#"

style="cursor:col-resize">sss

</a><br>

<a

href="#"

style="cursor:default">sss

</a><br>

cursor

:

auto

|

all-scroll

|

col-resize|

crosshair

|

default

|

hand

|

move

|

help

|

no-drop

|

not-allowed

|

pointer

|

progress

|

row-resize

|

text

|

vertical-text

|

wait

|

*-resize

|

url

(

url

)

取值:

auto

: 

默认值。浏览器根据当前情况自动确定鼠标光标类型。

all-scroll

: 

IE6.0

有上下左右四个箭头,中间有一个圆点的光标。用于标示页面可以向上下左右任何方向滚动。

col-resize

: 

IE6.0

有左右两个箭头,中间由竖线分隔开的光标。用于标示项目或标题栏可以被水平改变尺寸。

crosshair

: 

简单的十字线光标。

default

: 

客户端平台的默认光标。通常是一个箭头。

hand

: 

竖起一只手指的手形光标。就像通常用户将光标移到超链接上时那样。

move

: 

十字箭头光标。用于标示对象可被移动。

help

: 

带有问号标记的箭头。用于标示有帮助信息存在。

no-drop

: 

IE6.0

带有一个被斜线贯穿的圆圈的手形光标。用于标示被拖起的对象不允许在光标的当前位置被放下。

not-allowed

: 

IE6.0

禁止标记(一个被斜线贯穿的圆圈)光标。用于标示请求的 *** 作不允许被执行。

pointer

: 

IE6.0

hand

一样。竖起一只手指的手形光标。就像通常用户将光标移到超链接上时那样。

progress

: 

IE6.0

带有沙漏标记的箭头光标。用于标示一个进程正在后台运行。

row-resize

: 

IE6.0

有上下两个箭头,中间由横线分隔开的光标。用于标示项目或标题栏可以被垂直改变尺寸。

text

: 

用于标示可编辑的水平文本的光标。通常是大写字母

I

的形状。

vertical-text

: 

IE6.0

用于标示可编辑的垂直文本的光标。通常是大写字母

I

旋转90度的形状。

wait

: 

用于标示程序忙用户需要等待的光标。通常是沙漏或手表的形状。

*-resize

: 

用于标示对象可被改变尺寸方向的箭头光标。w-resize

|

s-resize

|

n-resize

|

e-resize

|

ne-resize

|

sw-resize

|

se-resize

|

nw-resize

url

(

url

)

: 

IE6.0

用户自定义光标。使用绝对或相对

url

地址指定光标文件(后缀为

.cur

或者

.ani

)。


欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/zaji/7408310.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-04-05
下一篇 2023-04-05

发表评论

登录后才能评论

评论列表(0条)

保存