k4r1 k4r1 - 3 months ago 9
HTML Question

Transform Text To Another Text On Mouse Hover

How can i make my actual text transform into another text when the user hovers his/her mouse on top of the original text. I have provided the HTML code below. Any feedback is much appreciated!

<a href="#" class="btn_action_1">
<span>Justice League</span>
<i class="ico_arrow"></i>
</a>


EX: I have a text called ABC. When user points mouse on ABC, the element will transform into DEF. Got my point?

Answer

You can use css :hover, :before, content

a span:not(:hover):before {
  content: "ABC";
}
a span:hover:before {
  content: "DEF";
}
<a href="#" class="btn_action_1">
    <span></span>
<i class="ico_arrow"></i>
</a>