CSS中cursor属性给标签加上小手形状

我们发现a标签在网页中有一个值得注意的地方,即鼠标移到a标签上光标会变成一只小手的图标,移出a标签后又恢复为默认箭头。

如今,JS在网页中的功能越来越强大,有时候我们需要在页面中添加一些可点击的标签实现一些功能。如以下代码:

1
2
3
< meta charset = "utf-8" />
< title >给点击标签加上小手样式 - 琼台博客</ title >
< h1 onclick = "alert('hi');" >点击这里</ h1 >

 

鼠标指针变成文本输入图形

这个例子中,我们给h1标签加上了一个onclick事件,单击弹出hi提示框。虽然功能实现了,但我们发现鼠标指针移动到h1标签上的时候指针图形编程了一个文本输入图形

 

外层套a标签改变鼠标指针图形

为了让用户明白这里是可以点击的标签,通常我们会在外层套一个a标签,这样当用户移动到文本上的时候指针图形自然也就跟a标签一样都是一只小手形状,表示可以点击。如代码:

1
2
3
< meta charset = "utf-8" />
< title >给点击标签加上小手样式 - 琼台博客</ title >
< a href = "#" >< h1 onclick = "alert('hi');" >点击这里</ h1 ></ a >

有不少网站采用这种做法,这种做法并无不妥,也不会影响网页的展现效果。

但这种方法也有几点不妥:

  1. 套上a标签后,h1标签继承a标签样式;
  2. 对于a标签的href需要处理,又不能去掉;
  3. 要修改样式。

没有加a标签之前

CSS给点击标签加小手形状 琼台博客

加a标签以后,颜色改变,多了一条下划线。

CSS给点击标签加上小手形状

但我们通过CSS改变指针形状也是一种简便的方法。

 

通过CSS中的cursor属性改变指针

在CSS中有一个cursor方法可以改变鼠标指针状态图标,我们可以利用这个方法来达到移动指针到h1标签上的时候鼠标指针变成小手的状态效果。如下代码:

1
2
3
< meta charset = "utf-8" />
< title >给点击标签加上小手样式 - 琼台博客</ title >
< h1 style = "cursor:pointer;" onclick = "alert('hi');" >点击这里</ h1 >

效果图:

CSS给点击标签加小手形状 琼台博客

通过以上例子,可以很好的避免了套a标签带来的样式问题处理

以上例子中cursor的值pointer表示小手状态,cursor的属性的值有以下类型,不同值可以实现不同的指针效果。

css中cursor

表中数据摘自w3school

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值