用CSS设计鼠标的箭头:
CSS样式中的cursor属性用于定义鼠标样式
CSS属性 | 作用 |
auto | 正常鼠标样式 |
crosshair | 十字鼠标 |
default | 默认鼠标 |
pointer | 点状鼠标 |
move | 移动鼠标 |
e-resize,ne-resize,nw-resize,n-resize,se-resize,sw-resize,w-resize | 改变大小鼠标 |
text | 文字鼠标 |
wait | 等待鼠标 |
help | 求助鼠标 |
progress | 过程鼠标 |
examp:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS鼠标样式</title>
<style type="text/css">
span{
display: block;
line-height: 30px;
margin: 5px 0;
background: #f0f0f0;
text-align: center;
width: 200px;
}
</style>
</head>
<body>
<span style="cursor: hand;">hand 手型</span>
<span style="cursor: crosshair;">crosshair 十字</span>
<span style="cursor: text;">text 文本</span>
<span style="cursor: wait;">wait 等待</span>
<span style="cursor: help;">help 求助</span>
<span style="cursor: move;">move 移动</span>
<span style="cursor: e-resize;">e-resize 右箭头</span>
<span style="cursor: ne-resize;">ne-resize 右上箭头</span>
<span style="cursor: n-resize;">n-resize 上箭头</span>
<span style="cursor: nw-resize;">nw-resize 左上箭头</span>
<span style="cursor: w-resize;">w-resize 左箭头</span>
<span style="cursor: sw-resize;">sw-resize 左下箭头</span>
<span style="cursor: s-resize;">s-resize 下箭头</span>
<span style="cursor: se-resize;">se-resize 右下箭头</span>
</body>
</html>