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标签之前

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

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

 

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

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

1 2 3

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

效果图：

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

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

表中数据摘自w3school