Deran Schilling, Learner: Simple Way to Toggle on Hover with CSS

Thursday, August 30, 2012

Simple Way to Toggle on Hover with CSS

Here’s a really simple way to toggle actions or more information to keep your pages clean.

	<html>
	<head>
	<style type="text/css">
	.toggle-me { display: none; }
	div:hover .toggle-me { display: inline-block; }
	</style>
	<body>
	<div>Most Important <span class="toggle-me">More Information</span></div>
	</body>
	</html>

view raw css_toggle.html hosted with ❤ by GitHub

<html>
<head>
<style type="text/css">
.toggle-me { display: none; }
div:hover .toggle-me { display: inline-block; }
</style>
<body>
<div>Most Important <span class="toggle-me">More Information</span></div>
</body>
</html>