CSS: substituir um texto em foco, mas a transição suave para o novo texto não funciona?
O cenário:
Se um usuário passar o mouse sobre um texto (por exemplo, uma tag h1), ele deverá mudar para um novo texto. O novo texto deve aparecer sem problemas.
O que eu fiz até agora:
Consegui substituir um texto por um novo com a propriedade "display: none" e "content: 'This is the new text'". Meu problema é que o novo texto não aparece sem problemas (não desaparece nas / transições). Também tentei usar a opacidade, mas ela não substitui o meu texto antigo (em vez disso, desaparece e o novo texto aparece ao lado).
Aqui está umJSFiddle e snippet de código:
.my_div {
background-color: red;
}
.my_div:hover {
background-color: green;
transition: all 500ms ease-in-out;
}
.my_div:hover .title span {
display: none;
}
.my_div:hover .title:after {
content: "A wild text appears";
}
<div class="my_div">
<h1 class="title"><span>This is the old text</span></h1>
</div>