如何在悬停时更改单词中的每个字母 [英] How to make each letter in word change on hover

问题描述

因此，假设我的网站上某个段落的某个地方有一个单词"IamGreat"，并且希望将其悬停时更改为"Good4you".但是，我不想更改整个单词，而是希望每个字母都单独更改.因此，如果将鼠标悬停在字母"I"上，它将变成字母"G"，字母"r"将变成数字"4"，等等.这两个单词的长度相同.如果可能的话，我还想更改要更改的字母的css(字体颜色，字体变化等).有什么方法可以使用jQuery或javascript吗?

So lets say I have a the word "IamGreat" somewhere within a paragraph on my website, and I want it to change to "Good4you" on hover. However, instead of changing the whole word, I want it so that each letter changes individually. Hence if I hover over the letter "I" it will turn into the letter "G", the letter "r" will turn into the number "4" etc. The two words are the same length. If possible I would also like to change the css (font color, font varient etc.) of the letter which is being changed. Is there a way I can do this using jQuery or javascript?

推荐答案

span {
  font-size: 3em;
  position: relative;
}
span:after {
  position: absolute;
  content: attr(content);
  top: 0;
  left: 0;
  -webkit-transition: all 750ms;
  -moz-transition: all 750ms;
  -o-transition: all 750ms;
  transition: all 750ms;
  -webkit-transform-origin: bottom left;
  -ms-transform-origin: bottom left;
  transform-origin: bottom left;
}
span:hover:after {
  -webkit-transform: skew(10deg, 25deg);
  -ms-transform: skew(10deg, 25deg);
  transform: skew(10deg, 25deg);
}

<span content="H">H</span>
<span content="o">o</span>
<span content="v">v</span>
<span content="e">e</span>
<span content="r">r</span>

这篇关于如何在悬停时更改单词中的每个字母的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！