CSS: ¿Reemplazar un texto al pasar el mouse, pero la transición suave al nuevo texto no funciona?
El escenario:
Si un usuario se desplaza sobre un texto (por ejemplo, una etiqueta h1), debería cambiar a un nuevo texto. El nuevo texto debería aparecer sin problemas.
Lo que he hecho hasta ahora:
Pude reemplazar un texto por uno nuevo con "display: none" y "content: 'This is the new text'" -property. Mi problema es que el nuevo texto no aparece sin problemas (no se desvanece en / transiciones). También intenté usar la opacidad, pero no reemplaza mi texto anterior (en cambio, simplemente desaparece y aparece el nuevo texto al lado).
Aquí hay unJSFiddle y fragmento 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>