巧用CSS控制鼠标样式变换

insect15

insect15

2016-01-29 12:39

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


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

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


演示:手形

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


演示:移动

(本文来源于图老师网站,更多请访问https://m.tulaoshi.com/html/)源代码:<p style=cursor:move>演示:移动</p>


演示:等待

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


演示:定位指示

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


演示:帮助

(本文来源于图老师网站,更多请访问https://m.tulaoshi.com/html/)源代码:<P style="CURSOR: help">演示:帮助<P>


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

展开更多 50%)
分享

猜你喜欢

巧用CSS控制鼠标样式变换

Html CSS布局 Div+CSS XHTML
巧用CSS控制鼠标样式变换

巧用CSS改变鼠标的样式

Web开发
巧用CSS改变鼠标的样式

s8lol主宰符文怎么配

英雄联盟 网络游戏
s8lol主宰符文怎么配

如何用CSS层叠样式表控制鼠标显示的样式

Web开发
如何用CSS层叠样式表控制鼠标显示的样式

JS控制CSS样式的方法

Web开发
JS控制CSS样式的方法

lol偷钱流符文搭配推荐

英雄联盟 网络游戏
lol偷钱流符文搭配推荐

JQuery CSS样式控制 学习笔记

Web开发
JQuery CSS样式控制 学习笔记

CSS样式控制图片裁切显示

Web开发
CSS样式控制图片裁切显示

lolAD刺客新符文搭配推荐

英雄联盟
lolAD刺客新符文搭配推荐

Code: Writing Text to a File (Visual Basic)

Code: Writing Text to a File (Visual Basic)

在VC资源文件中加入声音资源

在VC资源文件中加入声音资源
下拉加载更多内容 ↓