jqueryのマウスオーバー時にマウスカーソルを変更する方法

01/23/2017

このチュートリアルでは、jqueryを使用してマウスオーバー時にマウスカーソルを変更する方法を示します。

javascriptで次のhtmlファイルを作成します。

<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>

出力は次のようになります。

Details:
    	    
This is the details

htmlコードには、マウスを置いたときに変更されるラベルが含まれています。 クリックすると、showDetailsメソッドが呼び出されます。 クリックイベントが発生すると、最初にクリックイベントをバインド解除して新しいクリックメソッドをバインドします。このようにして、クリックが発生したときに1つのメソッドだけが呼び出されることが保証されます。

参考文献：

jQuery

最近のコメント