Posted By

s0l1dsnak3123 on 08/14/10


Tagged

css text hover on nettuts CHANGING


Versions (?)

Who likes this?

1 person have marked this snippet as a favorite

seloh77


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


 / Published in: CSS
 

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

  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
Posted By: jjjrmy on August 15, 2010

removeslashes();

You need to login to post a comment.