1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
|
<html>
<head>
<title>CSS cursors test</title>
<style type="text/css">
ul.cursor-demo {
width: 50%;
}
ul.cursor-demo li {
margin: 5px;
padding: 10px 15px;
border: 1px black solid;
list-style-type: none;
}
#position {
cursor: inherit;
position: absolute;
z-index: -1;
}
</style>
</head>
<body>
<h1>CSS cursors test</h1>
<p>
Hover over the CSS cursor name to see your browser's cursor style and where the HOTSPOT is.
</p>
<ul class="cursor-demo">
<li style="cursor: auto">auto</li>
<li style="cursor: default">default</li>
<li style="cursor: none">none</li>
<li style="cursor: context-menu">context-menu</li>
<li style="cursor: help">help</li>
<li style="cursor: pointer">pointer</li>
<li style="cursor: progress">progress</li>
<li style="cursor: wait">wait</li>
<li style="cursor: cell">cell</li>
<li style="cursor: crosshair">crosshair</li>
<li style="cursor: text">text</li>
<li style="cursor: vertical-text">vertical-text</li>
<li style="cursor: alias">alias</li>
<li style="cursor: copy">copy</li>
<li style="cursor: move">move</li>
<li style="cursor: no-drop">no-drop</li>
<li style="cursor: not-allowed">not-allowed</li>
<li style="cursor: grab">grab</li>
<li style="cursor: grabbing">grabbing</li>
<li style="cursor: e-resize">e-resize</li>
<li style="cursor: n-resize">n-resize</li>
<li style="cursor: ne-resize">ne-resize</li>
<li style="cursor: nw-resize">nw-resize</li>
<li style="cursor: s-resize">s-resize</li>
<li style="cursor: se-resize">se-resize</li>
<li style="cursor: sw-resize">sw-resize</li>
<li style="cursor: w-resize">w-resize</li>
<li style="cursor: ew-resize">ew-resize</li>
<li style="cursor: ns-resize">ns-resize</li>
<li style="cursor: nesw-resize">nesw-resize</li>
<li style="cursor: nwse-resize">nwse-resize</li>
<li style="cursor: col-resize">col-resize</li>
<li style="cursor: row-resize">row-resize</li>
<li style="cursor: all-scroll">all-scroll</li>
<li style="cursor: zoom-in">zoom-in</li>
<li style="cursor: zoom-out">zoom-out</li>
</ul>
<img id="position" src="positionmarker.png">
<script type="text/javascript">
(function() {
var tracker = document.getElementById('position');
document.onmousemove = handleMouseMove;
function handleMouseMove(event) {
var dot, eventDoc, doc, body, pageX, pageY;
event = event || window.event; // IE-ism
// If pageX/Y aren't available and clientX/Y are,
// calculate pageX/Y - logic taken from jQuery.
// (This is to support old IE)
if (event.pageX == null && event.clientX != null) {
eventDoc = (event.target && event.target.ownerDocument) || document;
doc = eventDoc.documentElement;
body = eventDoc.body;
event.pageX = event.clientX +
(doc && doc.scrollLeft || body && body.scrollLeft || 0) -
(doc && doc.clientLeft || body && body.clientLeft || 0);
event.pageY = event.clientY +
(doc && doc.scrollTop || body && body.scrollTop || 0) -
(doc && doc.clientTop || body && body.clientTop || 0 );
}
// Use event.pageX / event.pageY here
tracker.style.top = event.pageY;
tracker.style.left = event.pageX;
}
})();
</script>
</body>
|
