如何在jQuery中的mouseover上改变鼠标光标

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方法。 当一个点击事件发生时，我们首先解除绑定点击事件，然后绑定一个新的点击方法，这样我们确定当一个点击发生时，只有一个方法被调用。

参考文献：

jQuery

最近评论