【实例名称】
鼠标形状定义大全
【实例描述】
在网页的不同状态下,鼠标可以展示为不同的样式,本例罗列了常用的鼠标样式。
【实例代码】
<html xmlns="http://www.w3.org/1999/xhtml" > <head> <title>标题页</title> </head> <body> <table> <tr><td><a href="#" style="cursor:auto">随机自动箭头</a> </td><td><a href="#" style="cursor:default">标准箭头</a></td></tr> <tr><td><a href="#" style="cursor:hand">手形光标</a> </td><td><a href="#" style="cursor:wait">等待光标</a></td></tr> <tr><td><a href="#" style="cursor:text">I形光标</a></td> <td><a href="#" style="cursor:vertical-text">水平I形光标</a></td></tr> <tr><td><a href="#" style="cursor:no-drop">不可拖动光标</a> </td><td><a href="#" style="cursor:not-allowed">无效光标</a></td></tr> <tr><td><a href="#" style="cursor:help">?帮助光标</a></td> <td><a href="#" style="cursor:all-scroll">三角方向标</a></td></tr> <tr><td><a href="#" style="cursor:move">移动标</a></td> <td><a href="#" style="cursor:crosshair">十字标</a></td></tr> </table> </body> </html>
【运行效果】
【难点剖析】
本例中的重点是CSS中鼠标样式的设置。如果要设置鼠标停留在某控件上的样式,则在此控件的style上,设置其“cursor”属性。
【源码下载】
本实例JS代码下载
……