前端优
我用我的双手去成就我的梦想,我将遵循此道直至终结!
首页 > html+css >正文

cursor光标形状

发布时间:2024-08-27 18:24 作者:一友画

光标形状

语法: cursor:值


  • a)cursor:text;(文本图标)

    案例1代码示例:

    <style type="text/css">
    div{width: 80px;height: 80px;background: #abcdef;}
    div:hover{cursor: text;}
    </style>
    <div></div>
    
    案例1
     


  • b)cursor:help;(问号图标)

    案例2代码示例:

    <style type="text/css">
    div{width: 80px;height: 80px;background: #abcdef;}
    div:hover{cursor: help;}
    </style>
    <div></div>
    
    案例2
     


  • c)cursor:wait;(等待图标)

    案例3代码示例:

    <style type="text/css">
    div{width: 80px;height: 80px;background: #abcdef;}
    div:hover{cursor: wait;}
    </style>
    <div></div>
    
    案例3
     


  • d)cursor:pointer;(小手图标)

    案例4代码示例:

    <style type="text/css">
    div{width: 80px;height: 80px;background: #abcdef;}
    div:hover{cursor: pointer;}
    </style>
    <div></div>
    
    案例4
     


  • e)cursor:move;(移动图标)

    案例5代码示例:

    <style type="text/css">
    div{width: 80px;height: 80px;background: #abcdef;}
    div:hover{cursor: move;}
    </style>
    <div></div>
    
    案例5
     


  • f)cursor:default;(箭头图标)

    案例6代码示例:

    <style type="text/css">
    div{width: 80px;height: 80px;background: #abcdef;}
    div:hover{cursor: default;}
    </style>
    <div></div>
    
    案例6
     


  • g)cursor:url(图标路径),auto;(选择图标时,该图标尽量小才能显示)

    案例7代码示例:

    <style type="text/css">
    div{width: 80px;height: 80px;background: #abcdef;}
    div:hover{cursor: url(/favicon.ico),auto;}
    </style>
    <div></div>
    
    案例7
     


  • h)cursor:not-allowed;(禁止点击或输入)

    案例8代码示例:

    <style type="text/css">
    div{width: 80px;height: 80px;background: #abcdef;}
    div:hover{cursor: not-allowed;}
    </style>
    <div></div>
    
    案例8
     

以上内容,在整理时难免有疏漏错误之处,如有发现,可以通过顶部的“联系站长”提出反馈,感谢您的支持!