Advanced Search

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\")

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.   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.