Advanced Search

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

/ Published in: CSS
Save to your folder(s)
You can view a demo on [JBIN](http://jsbin.com/okepo4). This was a quick 60 second venture. :) Got a better way?

Expand | Embed | Plain Text

Copy this code and paste it in your HTML 
  1. <!DOCTYPE html>
  2.  
  3. <html lang="en">
  4. <head>
  5.    <meta charset="utf-8">
  6.    <title>Sort of Lame CSS Text Changing</title>
  7. <style>
  8.  
  9. h1 { position: relative; }
  10. h1:hover { color: transparent; }
  11.  
  12. h1:hover:after {
  13. 	content: attr(data-hover-response);
  14. 	color: black;
  15. 	position: absolute;
  16. 	left: 0;
  17.  
  18. }
  19.  
  20. </style>
  21. </head>
  22. <body>
  23.  
  24.  
  25. <h1 data-hover-response="I Said Don't Touch Me!"> Don't Touch Me  </h1>
  26.  
  27. </body>
  28. </html>

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.