• 技术文章 >web前端 >css教程

    css怎么改变鼠标样式

    醉折花枝作酒筹醉折花枝作酒筹2021-04-02 15:55:39原创107

    在css中,可以通过cursor属性来设置鼠标样式,语法格式“cursor:值;”。cursor属性用于规定要显示的光标的类型(形状),可以设置鼠标指针放在一个元素边界范围内时所用的光标形状。

    本文操作环境:Windows7系统、HTML5&&CSS3版,DELL G3电脑

    有些时候我们并不想加文字,图片以及链接,却想要加链接时的鼠标样式。这就用到了我们的css中的cursor来设置鼠标指针形状。

    cursor属性规定要显示的光标的类型(形状)。该属性定义了鼠标指针放在一个元素边界范围内时所用的光标形状。

    下面就是鼠标指针cursor属性的一些属性值:

    5F8VAF3AEBZ7DU[03CZ06FV.png

    实例:

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8"> 
    <title></title> 
    </head>
    <body>
    <p>请把鼠标移动到单词上:</p>
    <span style="cursor:auto">auto</span><br>
    <span style="cursor:crosshair">crosshair</span><br>
    <span style="cursor:default">default</span><br>
    <span style="cursor:e-resize">e-resize</span><br>
    <span style="cursor:help">help</span><br>
    <span style="cursor:move">move</span><br>
    <span style="cursor:n-resize">n-resize</span><br>
    <span style="cursor:ne-resize">ne-resize</span><br>
    <span style="cursor:nw-resize">nw-resize</span><br>
    <span style="cursor:pointer">pointer</span><br>
    <span style="cursor:progress">progress</span><br>
    <span style="cursor:s-resize">s-resize</span><br>
    <span style="cursor:se-resize">se-resize</span><br>
    <span style="cursor:sw-resize">sw-resize</span><br>
    <span style="cursor:text">text</span><br>
    <span style="cursor:w-resize">w-resize</span><br>
    <span style="cursor:wait">wait</span><br>
    </body>
    </html>

    这样鼠标就变成我们需要的了。

    GIF.gif

    说明:

    还有一种用法其原理是:利用了CSS2的一个cursor的属性cursor:url (url),鼠标文件可以使用jpggifanicur多种文件格式。需要注意的这种方式只能在IE5.5以上浏览器中正常显示。

    推荐学习:《css视频教程

    以上就是css怎么改变鼠标样式的详细内容,更多请关注php中文网其它相关文章!

    声明:本文原创发布php中文网,转载请注明出处,感谢您的尊重!如有疑问,请联系admin@php.cn处理
    专题推荐:css
    上一篇:什么是css继承 下一篇:css水平居中怎么设置
    第15期线上培训班

    相关文章推荐

    • 什么是css3• css怎么设置div边框• css怎么去掉input边框• css怎么隐藏内容• css怎么实现内容不可选• 纯CSS如何实现图片轮播

    全部评论我要评论

  • 取消发布评论发送
  • 1/1

    PHP中文网