JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">
    <div class="text-1">Text 1</div>
    <div class="text-2">Text 2</div>
</div>

CSS

.text-2 {display: none;}
.container:hover .text-1 {display: none;}
.container:hover .text-2 {display: block;}