advanced code snippet search

Posted By

Nettuts on 08/14/10


Tagged


Versions (?)

Who likes this?

10 people have marked this snippet as a favorite

Aerendyl
seloh77
bjarniolsen
seanpowell
f1r3fl3x
polly42
yupui
qubestream
Net-Freak
jakegonzales


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

 / Published in: CSS
 

You can view a demo on JBIN. This was a quick 60 second venture. :) Got a better way?

Expand | Embed | Plain Text 
  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  

You need to login to post a comment.