trevorgreenleaf/gist:06f9ae4c40d773acb047

## gistfile1.html
<!DOCTYPE html>
	<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>English / Spanish Document</title>
		<style>
			.menu {
				background-color: #ccc;
				list-style: none;
			}
			.menu li a{
				display: inline-block;
				width:200px;
				background-color: #666;
				color:#fff;
				text-decoration: none;
				float: left;
				margin-left: 10px;
				font-family: arial;
				padding: 20px;
			}
		</style>
	</head>
	<body>

		<ul class="menu">
			<li><a href="#" title="hats">sombrero</a></li>
			<li><a href="#" title="cats">gato</a></li>
			<li><a href="#" title="dog">perro</a></li>
			<li><a href="#" title="bird">pájaro</a></li>
		</ul>

<script src="http://code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>

<script>

$('.menu li a').hover(
	// in
	function(){
		var spanish = $(this).text();
		var english = $(this).attr('title');
		// switch to english
		$(this).text(english);
		// switch title to spanish
		$(this).attr('title',spanish);
	},
	// out
	function(){
		var english = $(this).text();
		var spanish = $(this).attr('title');
		// switch to spanish
		$(this).text(spanish);
		// switch title to english
		$(this).attr('title',english);
	}
);

</script>


	</body>
	</html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<title>English / Spanish Document</title>
	<style>
	.menu {
	background-color: #ccc;
	list-style: none;
	}
	.menu li a{
	display: inline-block;
	width:200px;
	background-color: #666;
	color:#fff;
	text-decoration: none;
	float: left;
	margin-left: 10px;
	font-family: arial;
	padding: 20px;
	}
	</style>
	</head>
	<body>

	<ul class="menu">
	<li><a href="#" title="hats">sombrero</a></li>
	<li><a href="#" title="cats">gato</a></li>
	<li><a href="#" title="dog">perro</a></li>
	<li><a href="#" title="bird">pájaro</a></li>
	</ul>

	<script src="http://code.jquery.com/jquery-1.11.2.min.js"></script>
	<script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>

	<script>

	$('.menu li a').hover(
	// in
	function(){
	var spanish = $(this).text();
	var english = $(this).attr('title');
	// switch to english
	$(this).text(english);
	// switch title to spanish
	$(this).attr('title',spanish);
	},
	// out
	function(){
	var english = $(this).text();
	var spanish = $(this).attr('title');
	// switch to spanish
	$(this).text(spanish);
	// switch title to english
	$(this).attr('title',english);
	}
	);

	</script>



	</body>
	</html>