鼠标划过箭头变成小手，cursor的其他取值介绍等
鼠标经过时自身触发事件，经过其子元素时也触发该事件；鼠标经过时自身触发事件，经过其子元素时不触发该事件。cursor的值和描述等样式说明
·
关于页面样式的一些用法，以及关于鼠标的划过事件
body
{
background-image:url('paper.gif');//背景图片的正确写法
background-color:#cccccc;
cursor: pointer;//鼠标滑过变成小手
}
关于 background-image的一些介绍
| 值 | 说明 |
|---|---|
| url(‘URL’) | 图像的URL |
| none | 无图像背景会显示。这是默认 |
| linear-gradient() | 创建一个线性渐变的 “图像”(从上到下) |
| radial-gradient() | 用径向渐变创建 “图像”。 (center to edges) |
| repeating-linear-gradient() | 创建重复的线性渐变 “图像”。 |
| repeating-radial-gradient() | 创建重复的径向渐变 “图像” |
| inherit | 指定背景图像应该从父元素继承 |
关于cursor的其他取值
| 值 | 描述 |
|---|---|
| url，cursor:url(‘img/sanchaji.png’),pointer; | 可以将光标图形自定义为自己喜欢的图标样式，url()里是一个图标的连接，可以是png、ico、gif等，注意，要在url()后面定义一个普通的光标，否则自定义的图标不起作用！ |
| auto | 标准光标 |
| default | 标准箭头 |
| pointer, hand | 手形光标 |
| wait | 等待光标 （通常是一只表或沙漏） |
| text | I形光标 |
| vertical-text | 水平I形光标 |
| no-drop | 不可拖动光标 |
| not-allowed | 无效光标 |
| help | 帮助光标 （通常是一个问号或一个气球） |
| all-scroll | 三角方向标 |
| move | 移动标 |
| crosshair | 十字标 |
| e-resize | 此光标指示矩形框的边缘可被向右（东）移动。 |
| n-resize | 此光标指示矩形框的边缘可被向上（北）移动。 |
| ne-resize | 此光标指示矩形框的边缘可被向上及向右移动（北/东）。 |
| nw-resize | 此光标指示矩形框的边缘可被向上及向左移动（北/西）。 |
| w-resize | 此光标指示矩形框的边缘可被向左移动（西）。 |
| s-resize | 此光标指示矩形框的边缘可被向下移动（南）。 |
| se-resize | 此光标指示矩形框的边缘可被向下及向右移动（南/东）。 |
| sw-resize | 此光标指示矩形框的边缘可被向下及向左移动（南/西）。 |
关于鼠标划过事件（一般有下面这两对）
1、onmouseover ？ onmouseout：
鼠标经过时自身触发事件，经过其子元素时也触发该事件；
2、onmouseenter ？onmouseleave：
鼠标经过时自身触发事件，经过其子元素时不触发该事件。
关于长度单位的一些介绍
| 单位 | 描述 |
|---|---|
| em | 相对于应用在当前元素的字体尺寸，所以相对长度单位。一般浏览器字体大小默认为16px，则2em == 32px； |
| ex | 依赖于英文字母小 x 的高度 |
| ch | 数字 0 的宽度 |
| rem | rem 是根 em（root em）的缩写，rem作用于非根元素时，相对于根元素字体大小；rem作用于根元素字体大小时，相对于其出初始字体大小。 |
| vw | viewpoint width，视窗宽度，1vw=视窗宽度的1% |
| vh | viewpoint height，视窗高度，1vh=视窗高度的1% |
| vmin | vw和vh中较小的那个 |
| vmax | vw和vh中较大的那个。 |
| % |
汇聚全球AI编程工具，助力开发者即刻编程。
更多推荐
1
0- 0
已为社区贡献1条内容
所有评论(0)