css 鼠标悬浮样式_css之鼠标样式

有关鼠标样式的东西，只需要稍作个了解就行，除了pointer，其它的用的并不是非常的多。所有主流浏览器都支持 cursor 属性。

样式属性

1. url需使用的自定义光标的 URL。请在此列表的末端始终定义一种普通的光标，以防没有由 URL 定义的可用光标。
2. default默认光标（通常是一个箭头）auto默认。浏览器设置的光标。crosshair光标呈现为十字线。
3. pointer光标呈现为指示链接的指针（一只手）
4. move此光标指示某对象可被移动。
5. e-resize此光标指示矩形框的边缘可被向右（东）移动。
6. ne-resize此光标指示矩形框的边缘可被向上及向右移动（北/东）。
7. nw-resize此光标指示矩形框的边缘可被向上及向左移动（北/西）。
8. n-resize此光标指示矩形框的边缘可被向上（北）移动。
9. se-resize此光标指示矩形框的边缘可被向下及向右移动（南/东）。
10. sw-resize此光标指示矩形框的边缘可被向下及向左移动（南/西）。
11. s-resize此光标指示矩形框的边缘可被向下移动（南）。
12. w-resize此光标指示矩形框的边缘可被向左移动（西）。
13. text此光标指示文本。wait此光标指示程序正忙（通常是一只表或沙漏）。
14. help此光标指示可用的帮助（通常是一个问号或一个气球）。

练习代码

.box{
    width: 200px;
    height: 200px;
    background-color: red;

}
.box:hover{
    /* 有关鼠标样式的代码（cursor） */
    /* 十字形状 */
    /* cursor: crosshair; */
    /* 小手形状 */
    /* cursor: pointer; */
    /* 等待形状 */
    /* cursor: wait; */
    /* 帮助形状 */
    /* cursor: help; */
    /* 文本形状 */
    /* cursor: text; */
    /* 默认形状 */
    /* cursor: default; */
    /* 此光标指示某对象可被移动 */
    /* cursor: move; */
    /* 此光标指示矩形框的边缘可被向右（东）移动。 */
    /* cursor: e-resize; */
    /* 此光标指示矩形框的边缘可被向上及向右移动（北/东）。 */
    /* cursor: ne-resize; */
    /* 此光标指示矩形框的边缘可被向上及向左移动（北/西） */
    /* cursor: nw-resize; */
    /* 此光标指示矩形框的边缘可被向上（北）移动。 */
    /* cursor: n-resize; */
    /* 此光标指示矩形框的边缘可被向下及向右移动（南/东）。 */
    /* cursor: se-resize; */
    /* cursor: sw-resize; */
    /* cursor: s-resize; */
    cursor: w-resize;
    background-color: green;
}