CSS表单3 光标样式 (每个位置鼠标放上去的样式不同)

最新推荐文章于 2024-07-19 10:49:05 发布

放错位的天才

最新推荐文章于 2024-07-19 10:49:05 发布

阅读量336

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/lszw/p/10722567.html

本文详细介绍了CSS中光标样式的各种属性值及其效果，包括default、auto、crosshair、pointer、move、text、wait和help等，展示了如何通过设置光标属性值改变网页上的鼠标指针形状。

  <!DOCTYPE html>
 

  <
  html
  >
 

      
  <
  head
  >
 

          
  <
  title
  >单选按钮对齐</
  title
  >
 

          
  <
  style 
  type
  =
  "text/css"
  >
 

              
  a{display:block}
 

              
  a.aut{cursor:auto}
 

              
  a.crosshair{cursor:crosshair}
 

              
  a.default{cursor:default}
 

              
  a.pointer{cursor:pointer}
 

              
  a.move{cursor:move}
 

              
  a.text{cursor:text}
 

              
  a.wait{cursor:wait}
 

              
  a.help{cursor:help}
 

          
  </
  style
  >      
 

      
  </
  head
  >
 

      
  <
  body
  >
 

      
  <
  h1
  >软件开发，成就梦想</
  h1
  >
 

      
  <
  h2
  >学编程，上利永贞网 https://www.liyongzhen.com/</
  h2
  >  
 

      
  <
  a 
  class
  =
  "auto"
  >auto</
  a
  >
 

      
  <
  a 
  class
  =
  "crosshair"
  >crosshair</
  a
  >
 

      
  <
  a 
  class
  =
  "default"
  >default</
  a
  >
 

      
  <
  a 
  class
  =
  "pointer"
  >pointer</
  a
  >
 

      
  <
  a 
  class
  =
  "move"
  >move</
  a
  >
 

      
  <
  a 
  class
  =
  "text"
  >text</
  a
  >
 

      
  <
  a 
  class
  =
  "wait"
  >wait</
  a
  >
 

      
  <
  a 
  class
  =
  "help"
  >help</
  a
  >
 

      
  </
  body
  >
 

  </
  html
  >
 

   
 
cursor 属性有不同的值，这些值让光标显示不同的形状。
常见的形状有：
属性值说明
default默认光标，通常是一个箭头
auto浏览器自动识别的光标
crosshair十字线
pointer手型指针
move移动指针
text文本指针
wait指示程序正忙
col-resize双向移动
help帮助指针

转载于:https://www.cnblogs.com/lszw/p/10722567.html

属性值	说明
default	默认光标，通常是一个箭头
auto	浏览器自动识别的光标
crosshair	十字线
pointer	手型指针
move	移动指针
text	文本指针
wait	指示程序正忙
col-resize	双向移动
help	帮助指针