装饰鼠标箭头效果图如下:
HTML部分代码:
<!DOCTYPE html>
<html>
<head>
<!--系统内置 start-->
<script type="text/javascript" src="//qgt-style.oss-cn-hangzhou.aliyuncs.com/commonJSCSS/console.js"></script>
<!--系统内置 end-->
<meta charset="utf-8">
<title>案例</title>
<link rel="stylesheet" href="index.css">
</head>
<body>
<div>cursor: pointer</div>
<div>cursor: default</div>
<div>cursor: text</div>
<div>cursor: move</div>
<div>cursor: grab</div>
<div>cursor: zoom-in</div>
<div>cursor: zoom-out</div>
</body>
</html>
CSS部分代码:
div {
margin-bottom: 10px;
width: 200px;
height: 40px;
color: #FFFFFF;
background-color: #53B7FA;
text-align: center;
line-height: 40px;
}
div:nth-child(1) {
cursor: pointer;
}
div:nth-child(2) {
cursor: default;
}
div:nth-child(3) {
cursor: text;
}
div:nth-child(4) {
cursor: move;
}
div:nth-child(5) {
cursor: grab;
}
div:nth-child(6) {
cursor: zoom-out;
}