gentle-media · April 26, 2012 15:04
diff --git a/dabblet.css b/dabblet.css
 /**
 * How to animate 2 different elements on hover?
 */

 body {padding: 100px 20px}

 ul {
 	list-style: none;
 	margin: 0;
 	padding: 0}

 li {
 	float: left}
 	
 li a {
 	display: block;
 	width: 100px;
 	height: 30px;
 	font: 14px/30px helvetica, arial, serif;
 	text-decoration: none;
 	text-align: center;
 	color: #333;
 	transition: .5s}

 li a:hover {
 	background: #333;
 	color: #FF0}

 li:nth-child(3) a {margin-right: 100px}

 span {
 	display: inline-block;
 	font: 20px/30px helvetica, arial, serif;
 	color: #333;
 	transition: .5s}

 ul:hover + span {
 	font-size: 40px;
 	color: #00F}


diff --git a/dabblet.html b/dabblet.html
 <body>

 	<nav>

 		<ul>

 			<li><a href="#">link 1</a></li>
 			<li><a href="#">link 2</a></li>
 			<li><a href="#">link 3</a></li>

 		</ul>

 		<span>logo</span>

 	</nav>

 </body>
diff --git a/settings.json b/settings.json
 {"view":"split-vertical","fontsize":"100","seethrough":"","prefixfree":"1","page":"css"}
	/**
	* How to animate 2 different elements on hover?
	*/

	body {padding: 100px 20px}

	ul {
	list-style: none;
	margin: 0;
	padding: 0}

	li {
	float: left}

	li a {
	display: block;
	width: 100px;
	height: 30px;
	font: 14px/30px helvetica, arial, serif;
	text-decoration: none;
	text-align: center;
	color: #333;
	transition: .5s}

	li a:hover {
	background: #333;
	color: #FF0}

	li:nth-child(3) a {margin-right: 100px}

	span {
	display: inline-block;
	font: 20px/30px helvetica, arial, serif;
	color: #333;
	transition: .5s}

	ul:hover + span {
	font-size: 40px;
	color: #00F}