如何通过css或javascript或甚至使用jquery在html中扩展缩写词onhover？ [英] How to expand an abbreviated word onhover in html via css or javascript or even using jquery?

问题描述

对于我的投资组合网站我使用我的名字作为标志，我想为什么不是一点创新和创意，而不是使我的名字使用我的缩写和onmousehover有一个特定的顺序扩展。

For my portfolio website I am using my name as the logo and I thought why not be a bit more innovative and creative and instead of making my name use my initials and onmousehover have initials expand in a specific order.

例如，如果我使用TTS作为标志，并且悬停时TTS标志展开为文本到语音，当鼠标不悬停时，它会恢复到TTS。在我的头上，我想要一个打字机效果，其中TTS是固定的，并且onhover有T ext T o S peech ，其中粗体和空格悬停时添加。我尝试用几种不同的方式搜索这个问题，没有找到任何结果。如果任何人有任何建议，如何我可以解决这个问题，我会非常感谢的帮助。我已经使用了javascript和jquery在我的网站，所以要么为我工作。它是基于HTML5和CSS的非常小的PHP代码以及javascript和jquery方面。

For example If I used TTS as the logo and on hover have the TTS Logo expand to Text To Speech and when the mouse is not hovering have it revert to TTS. In my head I would like a typewriter effect where TTS is stationary and onhover have Text To Speech where the bold and the space are added when hovered. I tried googling this issue in a few different ways and was not able to find any results. If anyone has any suggestions on how I can solve this problem I would greatly appreciate the help. I have used both javascript, and jquery on my website so either would work for me. It is based off of a HTML5 and CSS with very minimal PHP code along with the javascript and jquery aspect. So I should be able to implement most solutions if anyone has any ideas.

推荐答案

你可以这样做

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>

这篇关于如何通过css或javascript或甚至使用jquery在html中扩展缩写词onhover？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！