首页  >  文章  >  web前端  >  怎么用CSS修改鼠标样式

怎么用CSS修改鼠标样式

php中世界最好的语言
php中世界最好的语言原创
2017-11-20 15:22:003110浏览

很多时候我们需要吧鼠标光标和页面的元素结合互动,这样能增加用户体验度,那么我们需要怎么用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