在javascript中突出显示当前和悬停精灵

Posted 2021-02-24

//highlight the selected navigation menu item
	$('#menu a.selected').each(function() {
			var position = $(this).css('backgroundPosition').split(' ');// ["0px", "0px"]
			$(this).css('background-position', '' + position[0] + ' -60px');
	});
	//setup the hover function to change the sprite for each menu item
	$('#menu a').hover(function () {
		//alert($(this).data('originalPositionX'));
		if($(this).data('originalPositionX')==undefined) {
			var position = $(this).css('backgroundPosition').split(' ');// ["0px", "0px"]
			$(this).data('originalPositionX', position[0]);
			$(this).data('originalPositionY', position[1]);		
		}
		$(this).css('background-position', '' + $(this).data('originalPositionX') + ' -30px');
	},
	//revert back to the original background position
	function () {
		$(this).css('background-position', $(this).data('originalPositionX') + ' ' + $(this).data('originalPositionY'));
	});