怎么用CSS修改鼠标样式

很多时候我们需要吧鼠标光标和页面的元素结合互动,这样能增加用户体验度,那么我们需要怎么用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修改鼠标样式的详细内容,更多请关注创想鸟其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 chuangxiangniao@163.com 举报,一经查实,本站将立刻删除。
发布者:程序猿,转转请注明出处:https://www.chuangxiangniao.com/p/1545200.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2025年12月21日 16:40:41
下一篇 2025年12月21日 16:40:58

相关推荐

  • css,js实现听话的骰子源码

    又是一波福利!css和js实现的一个听话的骰子,拿去研究吧,不要钱! 代码: PHP中文网–骰子源码html,body,ul {margin: 0;padding: 0;}body {perspective: 2000px;overflow: hidden;text-align: center;}…

    2025年12月21日
    000
  • css,js骰子抽奖源码

    本源码是根据之前发布的听话的骰子基础上再做升级的,免费提供源码,拿去学习吧!常来我们的创想鸟即可哦~ 代码: PHP中文网–骰子抽奖html,body,ul {margin: 0;padding: 0;}body {perspective: 1200px;overflow: hidden;}ul …

    2025年12月21日
    000
  • css波纹动画

    css波纹动画,动画效果,免费提供源码~~不要钱拿去研究吧~~ 代码: PHP中文网body{background: #000;}.box{width: 100%;height: 600px;background: #000;}.vr {display: block;width: 71px;heig…

    2025年12月21日
    000
  • css 、jquery实现3d立体旋转

    一个用css和jquery实现的3d立体旋转,免费提供源码~~可以供您研究哦~~ 代码: PHP中文网*{margin: 0;padding: 0;}ul,li{list-style: none;}#box {width: 800px;height: 360px;position: relative…

    2025年12月21日
    000
  • 用css实现圆形进度条

    利用纯css实现进度条小应用,可以放在其他的页面使用也可以自己研究~免费提供源码~~ 代码: PHP中文网*{margin: 0;padding: 0;}.progress-ring{width: 160px; height: 160px; border:20px solid green; bord…

    2025年12月21日
    000
  • html和CSS以及JavaScript的小例题(图)

    声明:本栏目所使用的素材都是凯哥学堂VIP学员所写,学员有权匿名,对文章有最终解释权;凯哥学堂旨在促进VIP学员互相学习的基础上公开笔记。 这个例题主要是做一个表格,一个存储*的表格,能够完成以下功能:1.添加学生2.删除学生3.修改学生4.分页查询学生html代码: CSS代码: JavaScri…

    2025年12月21日 好文分享
    000
  • html中关于checkBox选中样式设置

    例如外卖服务区域,选择时为多选,且一般隐藏checkbox样式框。只留下label字体和设置的外边框来进行选中样式控制,以此来提高用户体验。 这时要对checkbox进行处理 我总结的一个方法就是根据checked去进行设置 例子: 桥西区  这里我把checkbox和label写在p标签里,这样既…

    好文分享 2025年12月21日
    000
  • HTML调用CSS管理、美化div的方法

    css布局,关键在于html文件和css文件相对应。在html中,对各p的包含关系作层次分明的设计,然后在css文件中对样式、字体等式进行设计。 HTML文件 p_header p_views p_views_post p_views_auther p_views p_floot CSS文件 .p_…

    2025年12月21日
    000
  • 四种css垂直居中方法

    垂直居中 .parent{width: 400px;height: 400px;border:1px solid grey;display: } .children{width: 200px;height: 200px;background-color: #ccc;} /*table-cell*/ …

    好文分享 2025年12月21日
    000
  • HTML+CSS3实现心跳效果代码分享

    本文通过代码给大家介绍了html+css3模拟心的跳动的实现方法,非常不错,具有参考借鉴价值,需要的朋友参考下吧 废话不多说了,直接给大家贴代码了,具体代码如下所示: 模拟心的跳动 * { margin: 0; padding: 0;}body { background-color: #D4CECE…

    好文分享 2025年12月21日
    000
  • 实例展示DIV+CSS实现电台列表

    这篇文章主要介绍了p+css实现电台列表设计的示例代码,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧 CSS Spite技术:也就是CSS精灵技术,实际上CSS的精灵就是图片里的一个个的图标元素,这些图标可以使按钮、标签以及logo等等。很多网站中都应用了该技术,可有效…

    2025年12月21日 好文分享
    000
  • html5+CSS3+JS七夕告白功能实现详解

    因为今天8月28日就是中国的情人节—七夕,作为我这个程序猿一枚也不甘落后,还有一颗脱单的心,下面小编给大家制作了基于html5+css3+js实现的七夕情人节特效,具体实例代码,大家参考下本文  因为今天8月28日就是中国的情人节—七夕,作为程序猿一枚的我就只有在家敲代码咯!但我还是有一颗脱单的心;…

    2025年12月21日
    000
  • html中关于文本框样式的总结大全(收藏)

     输入框景背景透明: 鼠标划过输入框,输入框背景色变色:   输入字时输入框边框闪烁(边框为小方型): function borderColor(){if(self[‘oText’].style.borderColor==’red’){self[‘oText’].style.borderColor …

    好文分享 2025年12月21日
    000
  • 如何利用html和css来实现注册表单的简单实例

    效果总览: 具体代码实现 提交用户信息body, p, td, input {font-size:12px; margin:0px; }select {height:20px; width:300px; }.title {font-size: 16px; padding: 10px; width:8…

    2025年12月21日
    000
  • 关于html和css以及javascript等其他的注释方式分享

    一、html的注释方法 内容 包含在“”之间的内容将会被浏览器忽略,且不会显示在用户浏览的最终界面中。 注释的部分虽然浏览器在执行时会忽略,但在浏览器中查看源代码时仍然可以看到 二、CSS的注释方法 立即学习“Java免费学习笔记(深入)”; /* css注释*/ 在单独的css样式表文件中也采用此…

    好文分享 2025年12月21日
    000
  • 关于html中列表样式的实例详解

    HTML中的列表 HTML中列表中共有三种:有序列表、无序列表和定义列表。 1、有序列表是一列使用数字进行标记的项目,它使用 包含于标签(ordered lists)内; <ol><li>开始部分</li><li>次要部分</li><…

    2025年12月21日 好文分享
    000
  • html使用四种方式引用css样式表的实例详解

    方法一: css1.html 内联样式(方法一)百度一下 方法二: css2.html style标签中调用(方法二)a{color:#FF0000;background:#FFFF00;}百度二下  方法三: css3.html link标签中调用(方法三)百度三下 和css3.html同目录下的…

    好文分享 2025年12月21日
    000
  • html以及DIV+CSS的命名规范总结分享(收藏)

    网页制作中规范使用div+css命名规则,可以改善优化功效特别是团队合作时候可以提供合作制作效率,具体div css命名规则css命名大全内容篇。 常用DIV+CSS命名大全集合,即CSS命名规则 我们开发CSS+DIV网页(Xhtml)时候,比较困惑和纠结的事就是CSS命名,特别是新手不知道什么地…

    好文分享 2025年12月21日
    000
  • 关于html与CSS标签命名规则的总结大全

    文件夹主要建立以下文件夹:  1、images 存放一些网站常用的图片;  2、css 存放一些css文件;  3、flash 存放一些flash文件;  4、psd 存放一些psd源文件;  5、temp 存放所有临时图片和其它文件;  6、copyright 版权信息(可选)  8、readme…

    好文分享 2025年12月21日
    000
  • 关于html和CSS以及JavaScript前端命名规范的详解

    无意发现自己文件夹里面有这么一个文件,具体从哪里来的不记得了,仔细看下,发现总结的挺好的,贴出来分享一下。 无论是从技术角度还是开发视角,对于web前端开发规范文档都有一定规范,本文就css3和html5的发展前景总结了一系列的web开发文档,仅供大家参考。 规范目的: 为提高团队协作效率, 便于后…

    好文分享 2025年12月21日
    000

发表回复

登录后才能评论
关注微信