How to change the mouse cursor on mouseover in jquery

01/23/2017

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

Recent Comments