Change the mouse cursor using only css

Expand Post »

HTML and CSS Syntax (Toggle Plain Text)
<html><head><title>Change the cursor using css, by #2pencil</title>
<style type="text/css">
p.auto{ cursor:auto; }
p.cross{ cursor:crosshair; }
p.default{ cursor:default; }
p.pointer{ cursor:pointer; }
p.move{ cursor:move; }
p.eresize{ cursor:e-resize; }
p.neresize{ cursor:ne-resize; }
p.nwresize{ cursor:nw-resize; }
p.nresize{ cursor:n-resize; }
p.seresize{ cursor:se-resize; }
p.swresize{ cursor:sw-resize; }
p.sresize{ cursor:s-resize; }
p.wresize{ cursor:w-resize; }
p.text{ cursor:text; }
p.wait{ cursor:wait; }
p.help{ cursor:help; }
</style>
<body>
<p>Move the mouse over the words to see the cursor change:</p>
<p class=auto>Auto</p>
<p class=cross>Crosshair</p>
<p class=default>Default</p>
<p class=pointer>Pointer</p>
<p class=move>Move</p>
<p class=eresize>e-resize</p>
<p class=neresize>ne-resize</p>
<p class=nwresize>nw-resize</p>
<p class=nresize>n-resize</p>
<p class=seresize>se-resize</p>
<p class=swresize>sw-resize</p>
<p class=sresize>s-resize</p>
<p class=wresize>w-resize</p>
<p class=text>text</p>
<p class=wait>wait</p>
<p class=help>help</p>
</body></html>
<html><head><title>Change the cursor using css, by #2pencil</title>
<style type="text/css">
p.auto{ cursor:auto; }
p.cross{ cursor:crosshair; }
p.default{ cursor:default; }
p.pointer{ cursor:pointer; }
p.move{ cursor:move; }
p.eresize{ cursor:e-resize; }
p.neresize{ cursor:ne-resize; }
p.nwresize{ cursor:nw-resize; }
p.nresize{ cursor:n-resize; }
p.seresize{ cursor:se-resize; }
p.swresize{ cursor:sw-resize; }
p.sresize{ cursor:s-resize; }
p.wresize{ cursor:w-resize; }
p.text{ cursor:text; }
p.wait{ cursor:wait; }
p.help{ cursor:help; }
</style>
<body>
<p>Move the mouse over the words to see the cursor change:</p>
<p class=auto>Auto</p>
<p class=cross>Crosshair</p>
<p class=default>Default</p>
<p class=pointer>Pointer</p>
<p class=move>Move</p>
<p class=eresize>e-resize</p>
<p class=neresize>ne-resize</p>
<p class=nwresize>nw-resize</p>
<p class=nresize>n-resize</p>
<p class=seresize>se-resize</p>
<p class=swresize>sw-resize</p>
<p class=sresize>s-resize</p>
<p class=wresize>w-resize</p>
<p class=text>text</p>
<p class=wait>wait</p>
<p class=help>help</p>
</body></html>

Last edited by stymiee; Jul 1st, 2007 at 11:15 am. Reason: removed urls

Similar Threads

How to change the color of selected row of an HTML table without using CSS or Javascr in VB.NET
Mouse Cursor Image in Java
Changing Mouse Cursor in JavaScript / DHTML / AJAX
CSS menu hover question in HTML and CSS
Mouse cursor trouble on a two-monitor system in USB Devices and other Peripherals

akroncdnr

Reputation Points: 10

Solved Threads: 0

Newbie Poster

Offline

1 posts
since Jul 2007

This thread is more than three months old

No one has posted to this discussion for at least three months. Please let old threads die and do not reply to them unless you feel you have something new and valuable to contribute that absolutely must be added to make the discussion complete. Otherwise, please start a new thread in this forum instead.

Previous Thread in HTML and CSS Forum Timeline: Dreamweaver password help

Next Thread in HTML and CSS Forum Timeline: almost liquid design: navbar extend

DaniWeb Message

Cancel Changes

User Name
Password