CSS: замена текста при наведении, но плавный переход к новому тексту не работает?
Сценарий:
Если пользователь наводит курсор на текст (например, тег h1), он должен измениться на новый текст. Новый текст должен выглядеть плавно.
Что я сделал до сих пор:
Мне удалось заменить текст новым с помощью свойства "display: none" и "content: 'Это новый текст'". Моя проблема в том, что новый текст не отображается гладко (он не исчезает / переходы). Я также пытался использовать прозрачность, но она не заменяет мой старый текст (вместо этого он просто исчезает, а новый текст появляется рядом с ним).
ВотJSFiddle и фрагмент кода:
.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>