How to change the mouse cursor on mouseover in jquery

This tutorial shows how to change the mouse cursor on mouseover using jquery.

Create the following html file with the javascript:

<script src="http://code.jquery.com/jquery-1.10.2.min.js"> var t1;</script>
<div>
    <label id="detailsButton" for="basic-url">Details:</label>
   	<div id="detailsContent" >This is the details</div>
</div>
<script language="javascript">
 
$(function(){
	// Hide the details by default
	$('#detailsContent').hide();
			
	// Get the value of the number for the demo.
	$('#detailsButton').on('click',function(){
		// Show the details				
		showDetails();
	});
				
	// Change cursor on mouse over
	$('#detailsButton').css('cursor', 'pointer');
});

function showDetails(){
	// Show details
	$('#detailsContent').show( 1000 );
	
	// unbind the old event and bind hideDetails
	$('#detailsButton').unbind('click').bind('click',function(){
		hideDetails();	
	});
}

function hideDetails(){
	// Hide the details
	$('#detailsContent').hide();

	// unbind the old event and bind showDetails
	$('#detailsButton').unbind('click').bind('click',function(){
		showDetails();	
	});
}
</script>

The output will be:

Details:
    	    
This is the details

The html code contains a label that will be change when the mouse is over it. When it is clicked it will call the showDetails method. When a click event happens we first unbind the click event then bind a new click method, this way we are sure that only one method is called when a click happens.

References:

jQuery