【css】如何使光标移动到某个区域后改变形状

问题描述:

当光标移动到页面的某个位置的时候需要使其改变形状,如变成一个伸出食指的小手等等。

解决方法:

使用到css中的cursor属性

代码实现(以伸出食指的小手为例):

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>cursorTest</title>
</head>
<style>
    .cursorTestDiv{
        cursor:pointer;
        width: 100px;
        height: 100px;
        background: red;
    }
</style>
<body>
<div class="cursorTestDiv"></div>
</body>
</html>

运行成功后可以看到,当光标移入红色区域后就会变成一个小手。

使其产生变化的代码是这一行:

其他样式:

当然,光标的变化不仅仅局限于此

crosshair 光标呈现为十字线。
pointer 光标呈现为指示链接的指针(一只手)
move 此光标指示某对象可被移动。
e-resize 此光标指示矩形框的边缘可被向右(东)移动。
ne-resize 此光标指示矩形框的边缘可被向上及向右移动(北/东)。
nw-resize 此光标指示矩形框的边缘可被向上及向左移动(北/西)。
n-resize 此光标指示矩形框的边缘可被向上(北)移动。
se-resize 此光标指示矩形框的边缘可被向下及向右移动(南/东)。
sw-resize 此光标指示矩形框的边缘可被向下及向左移动(南/西)。
s-resize 此光标指示矩形框的边缘可被向下移动(南)。
w-resize 此光标指示矩形框的边缘可被向左移动(西)。
text 此光标指示文本。
wait 此光标指示程序正忙(通常是一只表或沙漏)。
help 此光标指示可用的帮助(通常是一个问号或一个气球)。

猜你喜欢

转载自blog.csdn.net/tyrant_forever/article/details/107784655