cursor 状态 总结 this.style.cursor

时间：2022-12-10 22:54:14

使用

1、
<STYLE>
P { cursor : hand; }
</STYLE>
2、
<STYLE>
oBox.style.cursor = "url(" + Some_Uniform_Resource_Identifier + ")";
</STYLE>
3、
<P onmouseover="this.style.cursor='hand'">
4、js   wraper为某对象ID
$("wraper").style.cursor='wait';

例子 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
 <HEAD>
  <TITLE> New Document </TITLE>
  <META NAME="Generator" CONTENT="EditPlus">
  <META NAME="Author" CONTENT="">
  <META NAME="Keywords" CONTENT="">
  <META NAME="Description" CONTENT="">
  <STYLE>
/*P { cursor : hand; }*/
oBox.style.cursor = "url(" + Some_Uniform_Resource_Identifier + ")";
  </STYLE>
 </HEAD>

 <BODY>
  <p>
  /*正常鼠标 */
cursor:auto; 
/*十字鼠标 */
cursor:crosshair;
/*默认鼠标 */
cursor:default;
/*手*/
cursor:pointer;
/*移动鼠标 */
cursor:move; 
/*改变大小鼠标 */
cursor:e-resize,ne-resize,nw-resize,n-resize,se-resize,sw-resize,s-resize,w-resize;
/*文字鼠标 */
cursor:text; 
/*等待鼠标 */
cursor:wait; 
/*求助鼠标 */
cursor:help;
  </p>
  <P onmouseover="this.style.cursor='auto'">正常鼠标auto</p>
  <P onmouseover="this.style.cursor='crosshair'">十字鼠标crosshair</p>
  <P onmouseover="this.style.cursor='default'">默认鼠标default</p>
  <P onmouseover="this.style.cursor='hand'">手hand</p>
  <P onmouseover="this.style.cursor='help'">求助鼠标help</p>
  <P onmouseover="this.style.cursor='move'">移动鼠标move</p>
  <P onmouseover="this.style.cursor='pointer'">手pointer</p>

  <!--
  <P onmouseover="this.style.cursor='e-resize,ne-resize,nw-resize,
n-resize,se-resize,sw-resize,s-resize,w-resize'">改变大小鼠标</p>-->
  <P onmouseover="this.style.cursor='text'">文字鼠标text</p>
  <P onmouseover="this.style.cursor='wait'">等待鼠标wait</p>
  <p>======new======</p>
  <P onmouseover="this.style.cursor='all-scroll'">all-scroll </p>
  <P onmouseover="this.style.cursor='col-resize'">col-resize </p>
  <P onmouseover="this.style.cursor='no-drop'">no-drop </p>
  <P onmouseover="this.style.cursor='not-allowed'">not-allowed </p>
  <P onmouseover="this.style.cursor='progress'">progress </p>
  <P onmouseover="this.style.cursor='row-resize'">row-resize </p>
  <P onmouseover="this.style.cursor='vertical-text'">vertical-text </p>
  <P onmouseover="this.style.cursor='vertical-text'">url(uri) 用户自定义 cursor:url('#');#=光标文件地址(注意文件格式必须为.cur或.ani)。 </p>
 </BODY>
</HTML>


标签：

相关文章