html4strict CSS Cursor示例
演示如何使用CSS更改鼠标光标。<br/>其他教程:<a href=\"http://www.echoecho.com/csscursors.htm\"> echoecho.com也是一个很好的帮助</a> 。
<span style="color: #009900;"><span style="color: #808080; font-style: italic;"><!------></span></span>
<span style="color: #009900;"><a href="http://december.com/html/4/element/h1.html"><span style="color: #000000; font-weight: bold;"><h1></span></a></span>CSS cursor styles<span style="color: #009900;"><span style="color: #000000; font-weight: bold;"></h1></span></span>
<span style="color: #009900;"><a href="http://december.com/html/4/element/h2.html"><span style="color: #000000; font-weight: bold;"><h2></span></a></span>Common cursors<span style="color: #009900;"><span style="color: #000000; font-weight: bold;"></h2></span></span>
<span style="color: #009900;"><a href="http://december.com/html/4/element/span.html"><span style="color: #000000; font-weight: bold;"><span</span></a> <span style="color: #000066;">style</span>=<span style="color: #ff0000;">"cursor: auto"</span><span style="color: #000000; font-weight: bold;">></span></span>cursor: <span style="color: #009900;"><a href="http://december.com/html/4/element/b.html"><span style="color: #000000; font-weight: bold;"><b></span></a></span> auto<span style="color: #009900;"><span style="color: #000000; font-weight: bold;"></b></span></span>.<span style="color: #009900;"><span style="color: #000000; font-weight: bold;"></span></span></span><span style="color: #009900;"><a href="http://december.com/html/4/element/br.html"><span style="color: #000000; font-weight: bold;"><br</span></a>/<span style="color: #000000; font-weight: bold;">></span></span>
<span style="color: #009900;"><a href="http://december.com/html/4/element/span.html"><span style="color: #000000; font-weight: bold;"><span</span></a> <span style="color: #000066;">style</span>=<span style="color: #ff0000;">"cursor: crosshair"</span><span style="color: #000000; font-weight: bold;">></span></span>cursor: <span style="color: #009900;"><a href="http://december.com/html/4/element/b.html"><span style="color: #000000; font-weight: bold;"><b></span></a></span>crosshair<span style="color: #009900;"><span style="color: #000000; font-weight: bold;"></b></span></span>.<span style="color: #009900;"><span style="color: #000000; font-weight: bold;"></span></span></span><span style="color: #009900;"><a href="http://december.com/html/4/element/br.html"><span style="color: #000000; font-weight: bold;"><br</span></a>/<span style="color: #000000; font-weight: bold;">></span></span>
<span style="color: #009900;"><a href="http://december.com/html/4/element/span.html"><span style="color: #000000; font-weight: bold;"><span</span></a> <span style="color: #000066;">style</span>=<span style="color: #ff0000;">"cursor: default"</span><span style="color: #000000; font-weight: bold;">></span></span>cursor: <span style="color: #009900;"><a href="http://december.com/html/4/element/b.html"><span style="color: #000000; font-weight: bold;"><b></span></a></span>default<span style="color: #009900;"><span style="color: #000000; font-weight: bold;"></b></span></span>.<span style="color: #009900;"><span style="color: #000000; font-weight: bold;"></span></span></span><span style="color: #009900;"><a href="http://december.com/html/4/element/br.html"><span style="color: #000000; font-weight: bold;"><br</span></a>/<span style="color: #000000; font-weight: bold;">></span></span>
<span style="color: #009900;"><a href="http://december.com/html/4/element/span.html"><span style="color: #000000; font-weight: bold;"><span</span></a> <span style="color: #000066;">style</span>=<span style="color: #ff0000;">"cursor: pointer"</span><span style="color: #000000; font-weight: bold;">></span></span>cursor: <span style="color: #009900;"><a href="http://december.com/html/4/element/b.html"><span style="color: #000000; font-weight: bold;"><b></span></a></span>pointer<span style="color: #009900;"><span style="color: #000000; font-weight: bold;"></b></span></span>
(or: <span style="color: #ddbb00;">&quot;</span>hand<span style="color: #ddbb00;">&quot;</span> - just IE).<span style="color: #009900;"><span style="color: #000000; font-weight: bold;"></span></span></span><span style="color: #009900;"><a href="http://december.com/html/4/element/br.html"><span style="color: #000000; font-weight: bold;"><br</span></a>/<span style="color: #000000; font-weight: bold;">></span></span>
<span style="color: #009900;"><a href="http://december.com/html/4/element/span.html"><span style="color: #000000; font-weight: bold;"><span</span></a> <span style="color: #000066;">style</span>=<span style="color: #ff0000;">"cursor: move"</span><span style="color: #000000; font-weight: bold;">></span></span>cursor: <span style="color: #009900;"><a href="http://december.com/html/4/element/b.html"><span style="color: #000000; font-weight: bold;"><b></span></a></span>move<span style="color: #009900;"><span style="color: #000000; font-weight: bold;"></b></span></span>.<span style="color: #009900;"><span style="color: #000000; font-weight: bold;"></span></span></span><span style="color: #009900;"><a href="http://december.com/html/4/element/br.html"><span style="color: #000000; font-weight: bold;"><br</span></a>/<span style="color: #000000; font-weight: bold;">></span></span>
<span style="color: #009900;"><a href="http://december.com/html/4/element/span.html"><span style="color: #000000; font-weight: bold;"><span</span></a> <span style="color: #000066;">style</span>=<span style="color: #ff0000;">"cursor: text"</span><span style="color: #000000; font-weight: bold;">></span></span>cursor: <span style="color: #009900;"><a href="http://december.com/html/4/element/b.html"><span style="color: #000000; font-weight: bold;"><b></span></a></span>text<span style="color: #009900;"><span style="color: #000000; font-weight: bold;"></b></span></span>.<span style="color: #009900;"><span style="color: #000000; font-weight: bold;"></span></span></span><span style="color: #009900;"><a href="http://december.com/html/4/element/br.html"><span style="color: #000000; font-weight: bold;"><br</span></a>/<span style="color: #000000; font-weight: bold;">></span></span>
<span style="color: #009900;"><a href="http://december.com/html/4/element/span.html"><span style="color: #000000; font-weight: bold;"><span</span></a> <span style="color: #000066;">style</span>=<span style="color: #ff0000;">"cursor: wait"</span><span style="color: #000000; font-weight: bold;">></span></span>cursor: <span style="color: #009900;"><a href="http://december.com/html/4/element/b.html"><span style="color: #000000; font-weight: bold;"><b></span></a></span>wait<span style="color: #009900;"><span style="color: #000000; font-weight: bold;"></b></span></span>.<span style="color: #009900;"><span style="color: #000000; font-weight: bold;"></span></span></span><span style="color: #009900;"><a href="http://december.com/html/4/element/br.html"><span style="color: #000000; font-weight: bold;"><br</span></a>/<span style="color: #000000; font-weight: bold;">></span></span>
<span style="color: #009900;"><a href="http://december.com/html/4/element/span.html"><span style="color: #000000; font-weight: bold;"><span</span></a> <span style="color: #000066;">style</span>=<span style="color: #ff0000;">"cursor: progress"</span><span style="color: #000000; font-weight: bold;">></span></span>cursor: <span style="color: #009900;"><a href="http://december.com/html/4/element/b.html"><span style="color: #000000; font-weight: bold;"><b></span></a></span>progress<span style="color: #009900;"><span style="color: #000000; font-weight: bold;"></b></span></span>.<span style="color: #009900;"><span style="color: #000000; font-weight: bold;"></span></span></span><span style="color: #009900;"><a href="http://december.com/html/4/element/br.html"><span style="color: #000000; font-weight: bold;"><br</span></a>/<span style="color: #000000; font-weight: bold;">></span></span>
<span style="color: #009900;"><a href="http://december.com/html/4/element/span.html"><span style="color: #000000; font-weight: bold;"><span</span></a> <span style="color: #000066;">style</span>=<span style="color: #ff0000;">"cursor: help"</span><span style="color: #000000; font-weight: bold;">></span></span>cursor: <span style="color: #009900;"><a href="http://december.com/html/4/element/b.html"><span style="color: #000000; font-weight: bold;"><b></span></a></span>help<span style="color: #009900;"><span style="color: #000000; font-weight: bold;"></b></span></span>.<span style="color: #009900;"><span style="color: #000000; font-weight: bold;"></span></span></span><span style="color: #009900;"><a href="http://december.com/html/4/element/br.html"><span style="color: #000000; font-weight: bold;"><br</span></a>/<span style="color: #000000; font-weight: bold;">></span></span>
<span style="color: #009900;"><a href="http://december.com/html/4/element/br.html"><span style="color: #000000; font-weight: bold;"><br</span></a>/<span style="color: #000000; font-weight: bold;">></span></span>
<span style="color: #009900;"><a href="http://december.com/html/4/element/h2.html"><span style="color: #000000; font-weight: bold;"><h2></span></a></span>Resize cursors<span style="color: #009900;"><span style="color: #000000; font-weight: bold;"></h2></span></span>
<span style="color: #009900;"><a href="http://december.com/html/4/element/span.html"><span style="color: #000000; font-weight: bold;"><span</span></a> <span style="color: #000066;">style</span>=<span style="color: #ff0000;">"cursor: e-resize"</span><span style="color: #000000; font-weight: bold;">></span></span>cursor: <span style="color: #009900;"><a href="http://december.com/html/4/element/b.html"><span style="color: #000000; font-weight: bold;"><b></span></a></span>e-resize<span style="color: #009900;"><span style="color: #000000; font-weight: bold;"></b></span></span>.<span style="color: #009900;"><span style="color: #000000; font-weight: bold;"></span></span></span><span style="color: #009900;"><a href="http://december.com/html/4/element/br.html"><span style="color: #000000; font-weight: bold;"><br</span></a>/<span style="color: #000000; font-weight: bold;">></span></span>
<span style="color: #009900;"><a href="http://december.com/html/4/element/span.html"><span style="color: #000000; font-weight: bold;"><span</span></a> <span style="color: #000066;">style</span>=<span style="color: #ff0000;">"cursor: ne-resize"</span><span style="color: #000000; font-weight: bold;">></span></span>cursor: <span style="color: #009900;"><a href="http://december.com/html/4/element/b.html"><span style="color: #000000; font-weight: bold;"><b></span></a></span>ne-resize<span style="color: #009900;"><span style="color: #000000; font-weight: bold;"></b></span></span>.<span style="color: #009900;"><span style="color: #000000; font-weight: bold;"></span></span></span><span style="color: #009900;"><a href="http://december.com/html/4/element/br.html"><span style="color: #000000; font-weight: bold;"><br</span></a>/<span style="color: #000000; font-weight: bold;">></span></span>
<span style="color: #009900;"><a href="http://december.com/html/4/element/span.html"><span style="color: #000000; font-weight: bold;"><span</span></a> <span style="color: #000066;">style</span>=<span style="color: #ff0000;">"cursor: nw-resize"</span><span style="color: #000000; font-weight: bold;">></span></span>cursor: <span style="color: #009900;"><a href="http://december.com/html/4/element/b.html"><span style="color: #000000; font-weight: bold;"><b></span></a></span>nw-resize<span style="color: #009900;"><span style="color: #000000; font-weight: bold;"></b></span></span>.<span style="color: #009900;"><span style="color: #000000; font-weight: bold;"></span></span></span><span style="color: #009900;"><a href="http://december.com/html/4/element/br.html"><span style="color: #000000; font-weight: bold;"><br</span></a>/<span style="color: #000000; font-weight: bold;">></span></span>
<span style="color: #009900;"><a href="http://december.com/html/4/element/span.html"><span style="color: #000000; font-weight: bold;"><span</span></a> <span style="color: #000066;">style</span>=<span style="color: #ff0000;">"cursor: n-resize"</span><span style="color: #000000; font-weight: bold;">></span></span>cursor: <span style="color: #009900;"><a href="http://december.com/html/4/element/b.html"><span style="color: #000000; font-weight: bold;"><b></span></a></span>n-resize<span style="color: #009900;"><span style="color: #000000; font-weight: bold;"></b></span></span>.<span style="color: #009900;"><span style="color: #000000; font-weight: bold;"></span></span></span><span style="color: #009900;"><a href="http://december.com/html/4/element/br.html"><span style="color: #000000; font-weight: bold;"><br</span></a>/<span style="color: #000000; font-weight: bold;">></span></span>
<span style="color: #009900;"><a href="http://december.com/html/4/element/span.html"><span style="color: #000000; font-weight: bold;"><span</span></a> <span style="color: #000066;">style</span>=<span style="color: #ff0000;">"cursor: se-resize"</span><span style="color: #000000; font-weight: bold;">></span></span>cursor: <span style="color: #009900;"><a href="http://december.com/html/4/element/b.html"><span style="color: #000000; font-weight: bold;"><b></span></a></span>se-resize<span style="color: #009900;"><span style="color: #000000; font-weight: bold;"></b></span></span>.<span style="color: #009900;"><span style="color: #000000; font-weight: bold;"></span></span></span><span style="color: #009900;"><a href="http://december.com/html/4/element/br.html"><span style="color: #000000; font-weight: bold;"><br</span></a>/<span style="color: #000000; font-weight: bold;">></span></span>
<span style="color: #009900;"><a href="http://december.com/html/4/element/span.html"><span style="color: #000000; font-weight: bold;"><span</span></a> <span style="color: #000066;">style</span>=<span style="color: #ff0000;">"cursor: sw-resize"</span><span style="color: #000000; font-weight: bold;">></span></span>cursor: <span style="color: #009900;"><a href="http://december.com/html/4/element/b.html"><span style="color: #000000; font-weight: bold;"><b></span></a></span>sw-resize<span style="color: #009900;"><span style="color: #000000; font-weight: bold;"></b></span></span>.<span style="color: #009900;"><span style="color: #000000; font-weight: bold;"></span></span></span><span style="color: #009900;"><a href="http://december.com/html/4/element/br.html"><span style="color: #000000; font-weight: bold;"><br</span></a>/<span style="color: #000000; font-weight: bold;">></span></span>
<span style="color: #009900;"><a href="http://december.com/html/4/element/span.html"><span style="color: #000000; font-weight: bold;"><span</span></a> <span style="color: #000066;">style</span>=<span style="color: #ff0000;">"cursor: s-resize"</span><span style="color: #000000; font-weight: bold;">></span></span>cursor: <span style="color: #009900;"><a href="http://december.com/html/4/element/b.html"><span style="color: #000000; font-weight: bold;"><b></span></a></span>s-resize<span style="color: #009900;"><span style="color: #000000; font-weight: bold;"></b></span></span>.<span style="color: #009900;"><span style="color: #000000; font-weight: bold;"></span></span></span><span style="color: #009900;"><a href="http://december.com/html/4/element/br.html"><span style="color: #000000; font-weight: bold;"><br</span></a>/<span style="color: #000000; font-weight: bold;">></span></span>
<span style="color: #009900;"><a href="http://december.com/html/4/element/span.html"><span style="color: #000000; font-weight: bold;"><span</span></a> <span style="color: #000066;">style</span>=<span style="color: #ff0000;">"cursor: w-resize"</span><span style="color: #000000; font-weight: bold;">></span></span>cursor: <span style="color: #009900;"><a href="http://december.com/html/4/element/b.html"><span style="color: #000000; font-weight: bold;"><b></span></a></span>w-resize<span style="color: #009900;"><span style="color: #000000; font-weight: bold;"></b></span></span>.<span style="color: #009900;"><span style="color: #000000; font-weight: bold;"></span></span></span><span style="color: #009900;"><a href="http://december.com/html/4/element/br.html"><span style="color: #000000; font-weight: bold;"><br</span></a>/<span style="color: #000000; font-weight: bold;">></span></span>
<span style="color: #009900;"><a href="http://december.com/html/4/element/br.html"><span style="color: #000000; font-weight: bold;"><br</span></a>/<span style="color: #000000; font-weight: bold;">></span></span>
<span style="color: #009900;"><a href="http://december.com/html/4/element/h2.html"><span style="color: #000000; font-weight: bold;"><h2></span></a></span>Other cursors<span style="color: #009900;"><span style="color: #000000; font-weight: bold;"></h2></span></span>
<span style="color: #009900;"><a href="http://december.com/html/4/element/span.html"><span style="color: #000000; font-weight: bold;"><span</span></a> <span style="color: #000066;">style</span>=<span style="color: #ff0000;">"cursor: row-resize"</span><span style="color: #000000; font-weight: bold;">></span></span>cursor: <span style="color: #009900;"><a href="http://december.com/html/4/element/b.html"><span style="color: #000000; font-weight: bold;"><b></span></a></span>row-resize<span style="color: #009900;"><span style="color: #000000; font-weight: bold;"></b></span></span>.<span style="color: #009900;"><span style="color: #000000; font-weight: bold;"></span></span></span><span style="color: #009900;"><a href="http://december.com/html/4/element/br.html"><span style="color: #000000; font-weight: bold;"><br</span></a>/<span style="color: #000000; font-weight: bold;">></span></span>
<span style="color: #009900;"><a href="http://december.com/html/4/element/span.html"><span style="color: #000000; font-weight: bold;"><span</span></a> <span style="color: #000066;">style</span>=<span style="color: #ff0000;">"cursor: col-resize"</span><span style="color: #000000; font-weight: bold;">></span></span>cursor: <span style="color: #009900;"><a href="http://december.com/html/4/element/b.html"><span style="color: #000000; font-weight: bold;"><b></span></a></span>col-resize<span style="color: #009900;"><span style="color: #000000; font-weight: bold;"></b></span></span>.<span style="color: #009900;"><span style="color: #000000; font-weight: bold;"></span></span></span><span style="color: #009900;"><a href="http://december.com/html/4/element/br.html"><span style="color: #000000; font-weight: bold;"><br</span></a>/<span style="color: #000000; font-weight: bold;">></span></span>
<span style="color: #009900;"><a href="http://december.com/html/4/element/span.html"><span style="color: #000000; font-weight: bold;"><span</span></a> <span style="color: #000066;">style</span>=<span style="color: #ff0000;">"cursor: vertical-text"</span><span style="color: #000000; font-weight: bold;">></span></span>cursor: <span style="color: #009900;"><a href="http://december.com/html/4/element/b.html"><span style="color: #000000; font-weight: bold;"><b></span></a></span>vertical-text<span style="color: #009900;"><span style="color: #000000; font-weight: bold;"></b></span></span>.<span style="color: #009900;"><span style="color: #000000; font-weight: bold;"></span></span></span><span style="color: #009900;"><a href="http://december.com/html/4/element/br.html"><span style="color: #000000; font-weight: bold;"><br</span></a>/<span style="color: #000000; font-weight: bold;">></span></span>
<span style="color: #009900;"><a href="http://december.com/html/4/element/span.html"><span style="color: #000000; font-weight: bold;"><span</span></a> <span style="color: #000066;">style</span>=<span style="color: #ff0000;">"cursor: all-scroll"</span><span style="color: #000000; font-weight: bold;">></span></span>cursor: <span style="color: #009900;"><a href="http://december.com/html/4/element/b.html"><span style="color: #000000; font-weight: bold;"><b></span></a></span>all-scroll<span style="color: #009900;"><span style="color: #000000; font-weight: bold;"></b></span></span>.<span style="color: #009900;"><span style="color: #000000; font-weight: bold;"></span></span></span><span style="color: #009900;"><a href="http://december.com/html/4/element/br.html"><span style="color: #000000; font-weight: bold;"><br</span></a>/<span style="color: #000000; font-weight: bold;">></span></span>
<span style="color: #009900;"><a href="http://december.com/html/4/element/span.html"><span style="color: #000000; font-weight: bold;"><span</span></a> <span style="color: #000066;">style</span>=<span style="color: #ff0000;">"cursor: no-drop"</span><span style="color: #000000; font-weight: bold;">></span></span>cursor: <span style="color: #009900;"><a href="http://december.com/html/4/element/b.html"><span style="color: #000000; font-weight: bold;"><b></span></a></span>no-drop<span style="color: #009900;"><span style="color: #000000; font-weight: bold;"></b></span></span>.<span style="color: #009900;"><span style="color: #000000; font-weight: bold;"></span></span></span><span style="color: #009900;"><a href="http://december.com/html/4/element/br.html"><span style="color: #000000; font-weight: bold;"><br</span></a>/<span style="color: #000000; font-weight: bold;">></span></span>
<span style="color: #009900;"><a href="http://december.com/html/4/element/span.html"><span style="color: #000000; font-weight: bold;"><span</span></a> <span style="color: #000066;">style</span>=<span style="color: #ff0000;">"cursor: not-allowed"</span><span style="color: #000000; font-weight: bold;">></span></span>cursor: <span style="color: #009900;"><a href="http://december.com/html/4/element/b.html"><span style="color: #000000; font-weight: bold;"><b></span></a></span>not-allowed<span style="color: #009900;"><span style="color: #000000; font-weight: bold;"></b></span></span>.<span style="color: #009900;"><span style="color: #000000; font-weight: bold;"></span></span></span><span style="color: #009900;"><a href="http://december.com/html/4/element/br.html"><span style="color: #000000; font-weight: bold;"><br</span></a>/<span style="color: #000000; font-weight: bold;">></span></span>
<span style="color: #009900;"><a href="http://december.com/html/4/element/span.html"><span style="color: #000000; font-weight: bold;"><span</span></a> <span style="color: #000066;">style</span>=<span style="color: #ff0000;">"cursor: url('/img/black_arrow.cur'), default;"</span><span style="color: #000000; font-weight: bold;">></span></span>cursor:
<span style="color: #009900;"><a href="http://december.com/html/4/element/b.html"><span style="color: #000000; font-weight: bold;"><b></span></a></span>url('/img/black_arrow.cur'), default<span style="color: #009900;"><span style="color: #000000; font-weight: bold;"></b></span></span> - IE 6+ only -- append <span style="color: #ddbb00;">&quot;</span>,
default<span style="color: #ddbb00;">&quot;</span> so it works in FF, too<span style="color: #009900;"><span style="color: #000000; font-weight: bold;"></span></span></span><span style="color: #009900;"><a href="http://december.com/html/4/element/br.html"><span style="color: #000000; font-weight: bold;"><br</span></a>/<span style="color: #000000; font-weight: bold;">></span></span>
<span style="color: #009900;"><a href="http://december.com/html/4/element/br.html"><span style="color: #000000; font-weight: bold;"><br</span></a>/<span style="color: #000000; font-weight: bold;">></span></span>
<span style="color: #009900;"><a href="http://december.com/html/4/element/h2.html"><span style="color: #000000; font-weight: bold;"><h2></span></a></span>All cursor codes - ready to copy and paste<span style="color: #009900;"><span style="color: #000000; font-weight: bold;"></h2></span></span>
<span style="color: #009900;"><a href="http://december.com/html/4/element/textarea.html"><span style="color: #000000; font-weight: bold;"><textarea</span></a> <span style="color: #000066;">name</span>=<span style="color: #ff0000;">"copy_and_paste"</span> <span style="color: #000066;">rows</span>=<span style="color: #ff0000;">"2"</span> <span style="color: #000066;">cols</span>=<span style="color: #ff0000;">"90"</span><span style="color: #000000; font-weight: bold;">></span></span>auto, crosshair, default,
pointer, move, text, wait, progress, help, resize, e-resize, ne-resize,
nw-resize, n-resize, se-resize, sw-resize, s-resize, w-resize, row-resize,
col-resize, vertical-text, all-scroll, no-drop, not-allowed, url()<span style="color: #009900;"><span style="color: #000000; font-weight: bold;"></textarea></span></span>
<span style="color: #009900;"><a href="http://december.com/html/4/element/br.html"><span style="color: #000000; font-weight: bold;"><br</span></a>/<span style="color: #000000; font-weight: bold;">></span></span>