Hover and change text (data-hover-response keyword) CSS + HTML5

How to declare :

<h1 data-hover-response=”I Said Don’t Touch Me!”> Don’t Touch Me  </h1>

<style>
h1 {
position: relative;
}

h1:hover {
color: transparent;
cursor:pointer;
}

h1:hover:after {
content: attr(data-hover-response);
color: #FB3048;
position: absolute;
left: 0;
cursor:pointer;
}
</style>
Output :
Just hover on below text and see result :

Don’t Touch Me

Leave a Reply