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

    cursor怎么用?CSS中cursor属性的使用方法以及可选值的解析

    yuliayulia2018-09-12 10:39:59原创20157
    在页面布局时,CSS是工作中必不可少的部分,常听别人讲:HTML是一个人素颜的样子,加了CSS后是一个人化妆以后的样子。这句话通俗易懂,很好的诠释了CSS与HTML之间的关系。CSS中的属性非常多,今天就着重讲一个属性,即CSS cursor属性,以及它的很多可选值,比如:cursor 手型 就是用的 cursor:pointer 这个属性。

    cursor怎么用?

    一、CSS cursor 基本语法

    cursor属性是什么:指鼠标指针放在一个元素边界范围内时所呈现的光标形状,它包括问号,小手等形状。
    使用时可以在任何你想要添加的标签里,插入style="cursor : 某属性值" ,也可以在CSS样式中添加。

    比如:<p style="cursor:pointer">pointer,小手形状</p> , <a href="#" style="cursor:help">help,帮助形状</a> 。

    cursor的属性值有十几种可选值,在工作中根据需要选择合适的值即可。

    二、CSS cursor 属性值

    1、最常用的cursor:pointer,光标呈现小手形状。

    <p style="cursor:pointer">pointer</p>

    2、cursor:help,问号光标

    <p style="cursor:help;">pointer</p>

    3、cursor:crosshair,十字架光标

    <p style="cursor:crosshair;">pointer</p>

    就详细介绍常用的这几个,其他的属性值都是一样的写法,只要改一改属性值就行,具体有哪些值,他们都代表什么意思,请看下面。

    default :默认光标,通常是一个箭头
    auto :默认,浏览器设置的光标
    crosshair :光标表示十字线
    pointer :光标表示指示链接的指针(一只手)
    move: 光标表示对象可被移动
    e-resize: 光标表示矩形框的边缘可被向右移动
    ne-resize:光标表示矩形框的边缘可被向上及向右移动
    nw-resize:光标表示矩形框的边缘可被向上及向左移动
    n-resize: 光标表示矩形框的边缘可被向上移动
    se-resize:光标表示矩形框的边缘可被向下及向右移动
    sw-resize:光标表示矩形框的边缘可被向下及向左移动
    s-resize: 光标表示矩形框的边缘可被向下移动
    w-resize:光标表示矩形框的边缘可被向左移动
    text :光标表示文本
    wait :光标表示程序正忙(通常是一只表或沙漏)
    help: 光标表示帮助(通常是一个问号)

    以上主要介绍了CSS中cursor属性的用法,以及不同属性值代表的意思,初学者可以在编辑器中试试不同的值,看看有什么样的效果,希望可以帮助到你。

    以上就是cursor怎么用?CSS中cursor属性的使用方法以及可选值的解析的详细内容,更多请关注php中文网其它相关文章!

    声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。
    专题推荐:cursor,css
    上一篇:CSS定位position的多种方式以及不同方式之间的区别 下一篇:css3如何实现过渡动画的效果?css3过渡效果的实现方法
    VIP课程(WEB全栈开发)

    相关文章推荐

    • 【腾讯云】年中优惠,「专享618元」优惠券!• css 兼容性问题this.style.cursor=''hand''_经验交流• firefox样式表定义不支持cursor:hand_CSS/HTML• CSS光标cursor - 小火柴的蓝色理想• 游标cursor
    1/1

    PHP中文网