What is the best way to change the cursor in JQuery

Question

Hi all,

I am new to JQuery.
I am trying to add some code in my HTML web page to change the cursor,
but I am not sure if it is the best way to do it using JQuery alone rather than doing some self-custom declaration in an external CSS.
(I don't know if JQuery has got some built-in CSS properties.)

Here is the code for my very simple HTML web page:

<script type="text/javascript">
 $(document).ready(function(){
  $("#replybox").draggable();         
         $("#closed").mouseover(function(){
         $("#closed").css("cursor","pointer"); 
         });        
 });
</script>
<div id="replybox">
<form>
<table border="2">
<tr><td align="center" bgcolor="#FFAAAA">
<span id="closed">Press here to close this box</span></td></tr>
<tr>
<td align="center">
Content:<textarea name="data[Reply][quote]" id="data[Reply][quote]" cols="72" rows="18">Helloworld</textarea>
</td>
</tr>
</table>
</form>
</div>

Please advise.

Answer 1

Why not $("#closed").css("cursor", "pointer"); outside of the mouseover? By default the cursor will only display when the mouse is over the element.

However, if you know from the start the element #closed will have a pointer cursor, why not put it in a style sheet? Something like #closed { cursor: pointer; }. This will let it work for people with JavaScript disabled too.

Answer 2

$("#closed").css("cursor", "property-value");

see a list of available property-values here: http://w3schools.com/css/pr_class_cursor.asp

Answer 3

You can do this in CSS as well:

span.crosshair {cursor:crosshair}
span.help {cursor:help}
span.wait {cursor:wait}