Advanced Search

Return to Snippet

Revision: 30461
at August 14, 2010 00:57 by s0l1dsnak3123
Updated Code 
<!DOCTYPE html>

<html lang="en">
<head>
   <meta charset="utf-8">
   <title>Sort of Lame CSS Text Changing</title>
<style>

  span { position: relative; }
span:hover { color: transparent; }

span:hover:after {
  content: attr(data-hover-response);
  width: 250px;
  color: black;
  position: absolute;
  left: 0;

}

</style>
</head>
<body>


<span data-hover-response="I Said Don't Touch Me!"> Don't Touch Me  </span>

</body>
</html>

Revision: 30460
at August 14, 2010 00:55 by s0l1dsnak3123
Updated Code 
<!DOCTYPE html>

<html lang="en">
<head>
   <meta charset="utf-8">
   <title>Sort of Lame CSS Text Changing</title>
<style>

  span { position: relative; }
span:hover { color: transparent; }

span:hover:after {
  content: attr(data-hover-response);
  width: 250px;
  color: black;
  position: absolute;
  left: 0;

}

</style>
</head>
<body>


<span data-hover-response="I Said Don't Touch Me!"> Don't Touch Me  </span>

</body>
</html>�

Revision: 30459
at August 14, 2010 00:55 by s0l1dsnak3123
Updated Code 
<!DOCTYPE html>

<html lang="en">
<head>
   <meta charset="utf-8">
   <title>Sort of Lame CSS Text Changing</title>
<style>

  span { position: relative; }
span:hover { color: transparent; }

span:hover:after {
  content: attr(data-hover-response);
  width: 250px;
  color: black;
  position: absolute;
  left: 0;

}

</style>
</head>
<body>


<span data-hover-response="I Said Don't Touch Me!"> Don't Touch Me  </span>

</body>
</html>​

Revision: 30458
at August 14, 2010 00:51 by s0l1dsnak3123
Initial Code 
<!DOCTYPE html>

<html lang="en">
<head>
   <meta charset="utf-8">
   <title>Sort of Lame CSS Text Changing</title>
<style>

h1 { position: relative; }
h1:hover { color: transparent; }

h1:hover:after {
	content: attr(data-hover-response);
	color: black;
	position: absolute;
	left: 0;

}

</style>
</head>
<body>


<span data-hover-response="I Said Don't Touch Me!"> Don't Touch Me  </span>
Initial URL 

                                

                                                            

                                    

                                        

                                        Initial Description
                                        

                                    

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

                                

                                                            

                                    

                                        

                                        Initial Title
                                        

                                    

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

                                

                                                            

                                    

                                        

                                        Initial Tags
                                        

                                    

                                    
css, text

                                

                                                            

                                    

                                        

                                        Initial Language
                                        

                                    

                                    
CSS