javascript - 如何通过 css 或 javascript 甚至使用 jquery 在 html 中扩展悬停的缩写词？

Question

对于我的投资组合网站，我使用我的名字作为 Logo ，我想为什么不更具创新性和创造性，而不是让我的名字使用我的首字母，而 onmousehover 则让首字母按特定顺序扩展。

例如，如果我使用 TTS 作为 Logo 并在悬停时将 TTS Logo 扩展为文本到语音，当鼠标未悬停时将其恢复为 TTS。在我的脑海里，我想要一个打字机效果，其中 TTS 是静止的，悬停时有 Text To Speech 粗体和空格是悬停时添加。我尝试用几种不同的方式用谷歌搜索这个问题，但没有找到任何结果。如果有人对我如何解决这个问题有任何建议，我将不胜感激。我在我的网站上同时使用了 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>