Return to Snippet

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