Response to \"SORT OF LAME (BUT COOL) CSS TEXT CHANGING ON HOVER\" by nettuts


/ Published in: CSS
Save to your folder(s)

I switched the h1 to a span to stop the hover from being effective from the other side of the page. Take a look at it [here](http://jsbin.com/okepo4/6/,\"here\")


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. span { position: relative; }
  10. span:hover { color: transparent; }
  11.  
  12. span:hover:after {
  13. content: attr(data-hover-response);
  14. width: 250px;
  15. color: black;
  16. position: absolute;
  17. left: 0;
  18.  
  19. }
  20.  
  21. </style>
  22. </head>
  23. <body>
  24.  
  25.  
  26. <span data-hover-response="I Said Don't Touch Me!"> Don't Touch Me </span>
  27.  
  28. </body>
  29. </html>

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.