html设置鼠标指针的形状,CSS - 鼠标指针样式详解(cursor光标样式、自定义指针图片)...
我们浏览网页时会发现,鼠标指针会根据不同类型的元素进行相应的变化,比如:移到文本框上时会变成文本指示样式,移到链接上时会变成手型(手指形状)。
如果想要修改指针样式,只需要通过 cursor 这个 CSS 样式进行设置即可。
1,修改光标样式
假设我们想让光标移动到按钮上时变成十字形状:
(1)最简单的方法就是直接设置元素的 cursor样式。
hangge.com
(2)也可以把光标样式定义成相应的 class样式,元素这边直接使用使用即可。
.alias {cursor: alias;}
.all-scroll {cursor: all-scroll;}
.auto {cursor: auto;}
.cell {cursor: cell;}
.context-menu {cursor: context-menu;}
.col-resize {cursor: col-resize;}
.copy {cursor: copy;}
.crosshair {cursor: crosshair;}
.default {cursor: default;}
.e-resize {cursor: e-resize;}
.ew-resize {cursor: ew-resize;}
.grab {cursor: grab;}
.grabbing {cursor: grabbing;}
.help {cursor: help;}
.move {cursor: move;}
.n-resize {cursor: n-resize;}
.ne-resize {cursor: ne-resize;}
.nesw-resize {cursor: nesw-resize;}
.ns-resize {cursor: ns-resize;}
.nw-resize {cursor: nw-resize;}
.nwse-resize {cursor: nwse-resize;}
.no-drop {cursor: no-drop;}
.none {cursor: none;}
.not-allowed {cursor: not-allowed;}
.pointer {cursor: pointer;}
.progress {cursor: progress;}
.row-resize {cursor: row-resize;}
.s-resize {cursor: s-resize;}
.se-resize {cursor: se-resize;}
.sw-resize {cursor: sw-resize;}
.text {cursor: text;}
.url {cursor: url(myBall.cur),auto;}
.w-resize {cursor: w-resize;}
.wait {cursor: wait;}
.zoom-in {cursor: zoom-in;}
.zoom-out {cursor: zoom-out;}
hangge.com
2,光标样式汇总
下面列出了所有的光标样式,将鼠标移动到上面即可看到效果。
pointer
alias
all-scroll
auto
cell
context-menu
col-resize
coliy
crosshair
default
e-resize
ew-resize
grab
grabbing
helli
move
n-resize
ne-resize
nesw-resize
ns-resize
nw-resize
nwse-resize
no-droli
none
not-allowed
liointer
lirogress
row-resize
s-resize
se-resize
sw-resize
text
url
w-resize
wait
zoom-in
zoom-out
3,使用自定义图片作为鼠标光标
如果觉得自带的这些光标样式还不能满足需求,我们还可以使用指定图片作为光标。比如下面样例,当我们鼠标移动到按钮上时,指针变成一个名为“refresh.png”的图片。
.url {cursor: url(refresh.png),auto;}
hangge.com
html设置鼠标指针的形状,CSS - 鼠标指针样式详解(cursor光标样式、自定义指针图片)...相关推荐
- JSX设置CSS样式详解
JSX设置CSS样式详解 1. 使用className设置样式(CSS的其他选择器也是同理) (1)定义一个CSS文件style.css,和普通CSS一样定义class选择器 .sty1{//和普通C ...
- 我的学习笔记——CSS背景渐变(Gradients)详解
我的学习笔记--CSS背景渐变(Gradients)详解 一.线性渐变(Linear Gradients) 1.语法 background-image: linear-gradient(directi ...
- CSS超链接样式详解
CSS超链接样式详解 1.超链接伪类 2.深入了解:hover :hover用于div :hover用于img 3.鼠标样式 浏览器鼠标样式 自定义鼠标样式 1.超链接伪类 在CSS中,我们可以使用& ...
- CSS浏览器兼容性问题详解总结
CSS浏览器兼容性问题详解总结 2009-11-12 11:39 对css缩写的支持问题: 不论是ie 还是ff对css的缩写都有一小点问题 比如 border: 0xp solid #fff;两个浏 ...
- css中float详解,CSS浮动属性Float详解?史上最全Float详解
我们在学习css样式的时候,都知道css是盒概念,并且每一个盒子都是一个元素,下面我们就对CSS浮动属性Float进行详解,让你彻底了解Float. 一:什么是Float浮动? Float浮动是css ...
- devexpress 中的checkboxlist怎么设置间距_HTML中怎么设置h1的字体样式你知道吗?关于设置h1标签的样式详解
本篇文章主要为大家讲解了html中的h1标签的样式解析,但是如果不用css样式来做的话,那就只能在html4.01中显示了,所以我们还是尽快学习css层叠样式表吧,好了,现在让我们来说说这篇文章吧. ...
- qt怎么设置标签背景图片_HTML中怎么设置h1的字体样式你知道吗?关于设置h1标签的样式详解...
本篇文章主要为大家讲解了html中的h1标签的样式解析,但是如果不用css样式来做的话,那就只能在html4.01中显示了,所以我们还是尽快学习css层叠样式表吧,好了,现在让我们来说说这篇文章吧. ...
- (图文详细)最通俗易懂的CSS 浮动float属性详解
(图文详细)最通俗易懂的CSS 浮动float属性详解 声明:本文属于搬砖大神的文章到自己的博客上,原文地址为:https://www.cnblogs.com/iyangyuan/archive/20 ...
- css中table标签详解(一)
css中table标签详解(一) 什么是table标签,以及table标签的组成? 不叨叨,直接上代码 <table><tr><td></td>< ...
- CSS中line-height属性详解(CSS之四)
CSS中line-height属性详解 基本概念 line-height,又称行高,指的是两行文字基线之间的距离,又可以称为这行文字所占的高度. 图中两行基线之间的距离就是行高,基线相关可以查看CSS ...
最新文章
- deepin开通ssh
- 基于postfix一步一步构建Mailserver,支持虚拟用户,支持WebMail
- 2018-2019-2 网络对抗技术 20165320 Exp4 恶意代码分析
- python写内存挂_编写高效内存Python代码的3个技巧
- 在要求输入数字处找到非数字字符_剑指 Offer 67. 把字符串转换成整数 leetcode 剑指offer系列...
- 春考计算机组装维修知识点,【校选修】计算机组装与维修 考试题
- git 创建邮箱 用户名_厉害了!IDEA中如何使用Git进行项目管理,完整教程来了?...
- 嵌入式linux gif 缩放_嵌入式环境动力监控主机
- dfs时间复杂度_Python实现图的经典DFS、BFS、Dijkstra、Floyd、Prim、Kruskal算法
- doubango安卓端的帧率太低,解决办法
- CentOS7 安装 oracle 10g
- 内存池的设计和实现 -- C++应用程序性能优化
- 单火线智能开关设计笔记
- 云服务器网站logo,云服务器 logo
- 如何获取某个网站IP地址?
- error launching idea
- linux拷贝文件断电后丢失,linux突然断电重启,配置文件丢失/程序无法打开/文件损坏...
- Android下载管理问题分析
- Word 自动更改题注章节编号格式“图一.1”为“图1.1”
- CentOS最新版本与历史版本下载
热门文章
- KVM-QEMU的vCPU调度算法与Xen Credit算法对比分析
- xshell修改服务器登录密码
- qtdesigner设计表格_使用Qt Designer进行布局
- ora01033是什么错误linux,ora-01033错误的解决办法
- php mysql是bs还是cs_bs和cs架构的区别是什么
- python下载加密m3u8_基于Python3实现的m3u8批量下载器 解密合并多线程 (开车新姿势~)...
- px和毫米之间的转换
- 常见算法工程师面试题总结(机器学习,深度学习)
- MindMaster Pro 8.0.0 — 亿图思维导图
- Debian中Nvidia驱动、Firefox、Flash以及alsa声卡驱动安装详解