Comment changer le curseur de la souris sur mouseover en jquery

01/23/2017

Ce tutoriel montre comment changer le curseur de la souris sur mouseover en utilisant jquery.

Créez le fichier html suivant avec le 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>

La sortie sera:

Details:
    	    
This is the details

Le code html contient une étiquette qui sera modifiée lorsque la souris est au-dessus. Lorsqu'il est cliqué, il appellera la méthode showDetails. Quand un événement de clic se produit nous dissocions d'abord l'événement de clic puis liant une nouvelle méthode de clic, ainsi nous sommes sûrs qu'une seule méthode est appelée quand un clic se produit.

Références :

jQuery

Commentaires récents