Sort of Lame (but cool) CSS Text Changing on Hover

Revision: 30449

at August 14, 2010 00:34 by Nettuts

Updated Code

<!DOCTYPE html>

<html lang="en">
<head>
   <meta charset="utf-8">
   <title>Sort of Lame CSS Text Changing</title>
<style>

h1 { position: relative; }
h1:hover { color: transparent; }

h1:hover:after {
	content: attr(data-hover-response);
	color: black;
	position: absolute;
	left: 0;

}

</style>
</head>
<body>


<h1 data-hover-response="I Said Don't Touch Me!"> Don't Touch Me  </h1>

</body>
</html>

Revision: 30448

at August 14, 2010 00:31 by Nettuts

Initial Code

<!DOCTYPE html>

<html lang="en">
<head>
   <meta charset="utf-8">
   <title>Sort of Lame CSS Text Changing</title>
<style>

h1 { position: relative; }
h1:hover { color: transparent; }

h1:hover:after {
	content: attr(data-hover-response);
	color: black;
	position: absolute;
	left: 0;

}

</style>
</head>
<body>


<h1 data-hover-response="I Said Don't Touch Me!"> Don't Touch Me  </h1>

</body>
</html>

Initial URL

Initial Description

You can view a demo on [JBIN](http://jsbin.com/okepo4). This was a quick 60 second venture. :) Got a better way?

Initial Title

Sort of Lame (but cool) CSS Text Changing on Hover

Initial Tags

Initial Language

CSS

Choose a language for easy browsing: