While transitions for the display property may not work, I am exploring alternatives. I attempted using the visibility property but it didn't quite fit my needs. In my current setup, different text is displayed when hovering over an anchor tag by setting the span to display: none;. Using opacity animation isn't ideal as the element will still occupy space. Is there a potential workaround in Javascript or jQuery that could achieve a smooth switch between the two texts? Below is a simplified code snippet without including the transition property and its prefixes for clarity. The desired effect is a gradual fade-out of one text while the other fades in.
HTML
<div class="navbar">
<ul>
<li><a id="menu1" href="index.html"><i class="fa fa-home"></i><span> Home</span><span class="show"> Welcome Home</span></a></li>
</ul>
</div>
CSS
.show, a:hover span {
display: none;
}
a:hover .show {
display: inline;
}