CSS中cursor属性给标签加上小手形状
2017-03-07 15:07
399 查看
我们发现a标签在网页中有一个值得注意的地方,即鼠标移到a标签上光标会变成一只小手的图标,移出a标签后又恢复为默认箭头。
如今,JS在网页中的功能越来越强大,有时候我们需要在页面中添加一些可点击的标签实现一些功能。如以下代码:
有不少网站采用这种做法,这种做法并无不妥,也不会影响网页的展现效果。
但这种方法也有几点不妥:
套上a标签后,h1标签继承a标签样式;
对于a标签的href需要处理,又不能去掉;
要修改样式。
没有加a标签之前
![](http://www.qttc.net/static/upload/2012/13445907897982.jpg)
加a标签以后,颜色改变,多了一条下划线。
![](http://www.qttc.net/static/upload/2012/13445908532596.jpg)
但我们通过CSS改变指针形状也是一种简便的方法。
效果图:
![](http://www.qttc.net/static/upload/2012/13445907897982.jpg)
通过以上例子,可以很好的避免了套a标签带来的样式问题处理。
以上例子中cursor的值pointer表示小手状态,cursor的属性的值有以下类型,不同值可以实现不同的指针效果。
![](http://www.qttc.net/static/upload/2012/13445914471988.jpg)
表中数据摘自w3school
通过URL指定图形方式,我们可以制作一个透明的图形即可达到隐藏指针图形的效果。感兴趣的童鞋试试吧!
如今,JS在网页中的功能越来越强大,有时候我们需要在页面中添加一些可点击的标签实现一些功能。如以下代码:
鼠标指针变成文本输入图形
这个例子中,我们给h1标签加上了一个onclick事件,单击弹出hi提示框。虽然功能实现了,但我们发现鼠标指针移动到h1标签上的时候指针图形编程了一个文本输入图形。外层套a标签改变鼠标指针图形
为了让用户明白这里是可以点击的标签,通常我们会在外层套一个a标签,这样当用户移动到文本上的时候指针图形自然也就跟a标签一样都是一只小手形状,表示可以点击。如代码:但这种方法也有几点不妥:
套上a标签后,h1标签继承a标签样式;
对于a标签的href需要处理,又不能去掉;
要修改样式。
没有加a标签之前
![](http://www.qttc.net/static/upload/2012/13445907897982.jpg)
加a标签以后,颜色改变,多了一条下划线。
![](http://www.qttc.net/static/upload/2012/13445908532596.jpg)
但我们通过CSS改变指针形状也是一种简便的方法。
通过CSS中的cursor属性改变指针
在CSS中有一个cursor方法可以改变鼠标指针状态图标,我们可以利用这个方法来达到移动指针到h1标签上的时候鼠标指针变成小手的状态效果。如下代码:![](http://www.qttc.net/static/upload/2012/13445907897982.jpg)
通过以上例子,可以很好的避免了套a标签带来的样式问题处理。
以上例子中cursor的值pointer表示小手状态,cursor的属性的值有以下类型,不同值可以实现不同的指针效果。
![](http://www.qttc.net/static/upload/2012/13445914471988.jpg)
表中数据摘自w3school
可以自定义鼠标指针图形
其中值为URL的表示可以自定义图标代替系统指针图标,利用这个值我们DIY鼠标指针样式非常容易。好多比较个性的网页几乎都是通过此方式改变系统默认的箭头指针图形,使网页看起来更加个性。通过URL指定图形方式,我们可以制作一个透明的图形即可达到隐藏指针图形的效果。感兴趣的童鞋试试吧!
相关文章推荐
- CSS中cursor属性给标签加上小手形状
- CSS中cursor属性给标签加上小手形状
- CSS中cursor鼠标形状属性列表
- 关于鼠标悬浮标签元素效果(CSS:cursor属性)
- 在Jquery使用过程中用到了css属性:opacity(不透明度),cursor (光标的类型、形状)
- CSS—鼠标点上去帮助小手(CSS cursor 属性)
- 通过CSS中的cursor属性改变指针(小手)
- css cursor属性-显示的光标的类型(形状)的用法和定义
- CSS中的cursor属性(光标样式)
- CSS和JavaScript标签style属性对照表
- CSS和JavaScript标签style属性对照表
- CSS 标签属性/属性参考
- css 定义 html 页标签 没有的属性 超级好用 看了你就会明白了
- CSS笔记-除了a标签外的hover属性的应用
- 为什么在头部加上标签以后里面的href属性会影响到页面显示效果
- JS中的CSS Style属性标签对照表
- HTML和CSS的那些事儿-1标签属性和元素
- CSS和JS标签style属性对照表
- CSS和JS标签style属性对照表
- 常用的CSS标签标记属性翻译注释