如何通过css或javascript甚至使用jquery扩展html中的缩写单词onhover？

Question

对于我的投资组合网站，我使用我的名字作为徽标，我想为什么不做些创新和创新，而不是使用我的姓名缩写和onmousehover来使姓名缩写按特定顺序扩展。

例如，如果我将TTS用作徽标，并在悬停时将TTS徽标展开为“文字转语音”，而当鼠标不悬停时，将其还原为TTS。在我的脑海中，我想使用打字机效果，其中TTS固定不动，悬停时有T ext T o S peech，悬停时会加粗体和空格。我尝试以几种不同的方式搜索该问题，但未找到任何结果。如果有人对如何解决此问题有任何建议，我将非常感谢您的帮助。我在我的网站上同时使用了javascript和jquery，所以它们对我来说都可以工作。它基于HTML5和CSS，具有非常少的PHP代码以及javascript和jquery方面。因此，如果有人有任何想法，我应该能够实施大多数解决方案。

Answer 1

你可以做这样的事情

span {
  display: inline;
}
span:after {
  width: 0px;
  overflow: hidden;
  display: inline-block;
  vertical-align: middle;
  transition: .2s linear;
}
span:nth-child(1):after {
  content: 'ext ';
}
span:nth-child(2):after {
  content: 'o ';
}
span:nth-child(3):after {
  content: 'peech ';
}
div:hover span:nth-child(1):after {
  width: 24px;
}
div:hover span:nth-child(2):after {
  width: 14px;
}
div:hover span:nth-child(3):after {
  width: 50px;
}

<div>
  <span>T</span>
  <span>T</span>
  <span>S</span>
</div>