巧用CSS控制鼠标样式变换

2016-01-29 12:39 7 1 收藏

巧用CSS控制鼠标样式变换,巧用CSS控制鼠标样式变换

【 tulaoshi.com - Html 】

    主页上的鼠标是不是就只有箭头和小手两种模样呢?如果鼠标移到“帮助”等字样上时,形状就变成求助的问号;鼠标移到可能需要较长时间等待的超链接时,鼠标形状就变成等待的样子……那该多好啊!


  其实,借助我们的css,几句很简单的代码就可以实现这一切!

  不信?把鼠标移到下面的演示文字上看看效果吧!


演示:手形

源代码:<P style="CURSOR: hand">演示:手形</P>


演示:移动

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/html/)源代码:<p style=cursor:move>演示:移动</p><a href="http://www.tulaoshi.com/html/" style="position:absolute;left:-10000px;">(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/html/)</a>


演示:等待

源代码:<P style="CURSOR: wait">等待状态</P>


演示:定位指示

源代码:<P style="CURSOR: crosshair">演示:定位指示</P>


演示:帮助

源代码:<P style="CURSOR: help">演示:帮助<P>


  是不是简单又方便?这里我们只用到了CSS中的“cursor”属性,利用“style=cursor:值”这样的语句形式,分别设置具体的就可以了。例如:值为“hand”时,当鼠标移到相应的文字或图片上时,就会变成超链接的小手形;值为“move”时,当鼠标移到相应的文字或图片上时,就会变成上下左右带方向箭头的形状,依此类推。这个小技巧也许可以在你制作主页时帮上一点忙呢!

来源:http://www.tulaoshi.com/n/20160129/1487030.html

延伸阅读
标签: Web开发
虽说在CSS参考手册中注明了cursor兼容性:IE4.0+ NS6.0+ 继承性:有。但还是有些属性值在FF环境中不支持. FF及IE6+支持的鼠标样式有 all-scroll  : IE6.0 有上下左右四个箭头,中间有一个圆点的光标。用于标示页面可以向上下左右任何方向滚动。 col-resize  : IE6.0 有左右两个箭头,中间由竖线分隔开的光...
标签: Web开发
HTML对于<font>内容</font>卷标只有: <font color=colorvalue size=fontsize face=字型></font>这3种设定,而关于CSS对于<font>内容</font>的延伸规格让我们可以对字型的有更详细的设定。对于字型的设定: font-family:字型名称1,字型名称3,字型名称3等等。显示字型的优先级,若计算机中有安装该字型,便以该字型显示。如果你...
标签: flash教程
本文为中国合作伙伴印象特别供稿,转载必须取得 授权 发个教程,虽然很简单,但是问的人也不少。  如果您是新手:请您认真学习,多想多练。  如果您是高手:请对此教程批评指正  个人建议:只提供思路,不建议照搬!  制作:海皇波士顿[老飞]   教程:  1.首先用Photoshop做三张图(图1) 730...
主要是要通过两个方面: (一)对鼠标的停留位置做出判断,也就是得到鼠标在屏幕上停留的位置。 (二)将鼠标的移动到所确定的位置上。 而实现这个功能则要使用到SetCursorPos这个函数,此函数的功能是设定鼠标位置。 这个函数的声明如下: Public Declare Function SetCursorPos Lib "user32" (ByVal x As ...
变脸大咖如何变换动物样式   变脸大咖如何变换动物样式?小伙伴们在变脸大咖里面变脸是不是觉得一直都是那个样式的?想换个样式吗?不知道怎么换样式也没关系,现在小编就就教小伙伴们变脸大咖如何变换动物样式。 1)打开变脸大咖,点击右上方的然后点击; 2)点击图片,然后手动调整图片接着点击右上角的; ...

经验教程

844

收藏

15
微博分享 QQ分享 QQ空间 手机页面 收藏网站 回到头部