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

    怎么用CSS修改鼠标样式

    php中世界最好的语言php中世界最好的语言2017-11-20 15:22:00原创2220
    很多时候我们需要吧鼠标光标和页面的元素结合互动,这样能增加用户体验度,那么我们需要怎么用CSS设置鼠标样式呢?今天就给大家带来这份教程,怎样用CSS来修改鼠标样式。

    我们在DIV CSS布局时候,我们会遇到对对象内鼠标指针光标进行控制,比如鼠标经过指针变为手指形状等样式,接下来我们介绍鼠标指针样式cursor控制。系统默认鼠标指针样式外,可以通过CSS设置图片为鼠标指针,常见有些网站鼠标指针是各种各样小图片样式,当然这个是通过css cursor设置鼠标样式。

    扩展阅读:css指针

    一、cursor语法与结构

    1、cursor语法:

    cursor : auto | crosshair | default | hand | move | help | wait | text | w-resize |s-resize | n-resize |e-resize | ne-resize |sw-resize | se-resize | nw-resize |pointer | url (url)

    常用cursor光标说明

    1)、div{ cursor:default }默认正常鼠标指针

    2)、div{ cursor:hand }和div{ cursor:text } 文本选择效果

    3)、div{ cursor:move } 移动选择效果

    4)、div{ cursor:pointer } 手指形状 链接选择效果

    5)、div{ cursor:url(url图片地址) }设置对象为图片

    2、cursor样式效果图

    1.png

    大前端成长进阶课程:进入学习

    3、鼠标指针说明

    cursor设置或检索在对象上移动的鼠标指针采用何种系统预定义的光标形状。

    4、布局结构

    p { cursor: text; } /* css注释: 设置鼠标移动到html p对象时鼠标变为文本选择样式 */

    a { cursor: pointer; } /* css注释: 设置鼠标移动到a超链接对象时鼠标变为手指形状(链接选择) */

    body { cursor: url("小图片地址")} /* 设置鼠标指针默认为一个小图片 */。

    常用的设置鼠标样式方法就是这么多,你学会了吗?

    相关阅读:

    用css实现css动画的暂停与播放功能教程

    怎样用CSS加粗字体

    怎样让css图片居中显示

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

    声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。

    前端(VUE)零基础到就业课程:点击学习

    清晰的学习路线+老师随时辅导答疑

    自己动手写 PHP MVC 框架:点击学习

    快速了解MVC架构、了解框架底层运行原理

    专题推荐:css 样式表 样式
    上一篇:怎样用CSS加粗字体 下一篇:自己动手写 PHP MVC 框架(40节精讲/巨细/新人进阶必看)

    相关文章推荐

    • ❤️‍🔥共22门课程,总价3725元,会员免费学• ❤️‍🔥接口自动化测试不想写代码?• ExtJs教程8• ajax基本介绍• 浏览器得到地址栏的相关信息_html/css_WEB-ITnose• 深入CSS,让网页开发少点“坑”_html/css_WEB-ITnose• 求两个纯Html之间的传值示例_html/css_WEB-ITnose
    1/1

    PHP中文网