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

 

HTML/CSS 2012-08-10 CSS,标签

我们发现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

可以自定义鼠标指针图形

其中值为URL的表示可以自定义图标代替系统指针图标，利用这个值我们DIY鼠标指针样式非常容易。好多比较个性的网页几乎都是通过此方式改变系统默认的箭头指针图形，使网页看起来更加个性。

通过URL指定图形方式，我们可以制作一个透明的图形即可达到隐藏指针图形的效果。感兴趣的童鞋试试吧！