Question

所以我想说一句话就是＆＃34; IamGreat＆＃34;在我的网站上的一个段落中的某个地方，我希望它改为＆＃34; Good4you＆＃34;在悬停。但是，我不想改变整个单词，而是希望每个字母单独更改。因此，如果我将鼠标悬停在字母上，我就会＃34;它将变成字母＆＃34; G＆＃34;，字母＆＃34; r＆＃34;会变成数字＆＃34; 4＆＃34;这两个词的长度相同。如果可能的话，我还想更改正在更改的字母的css（字体颜色，字体变量等）。有没有办法可以使用jQuery或javascript做到这一点？

Answer 1

＆＃13;

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);
}

＆＃13;

<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>

＆＃13;

Answer 2

我会在jquery中使用这个场景

get string lenght（获取字符串中所有字符的索引）
获取大写字符及其索引（A，B，C）
所以你通过这个数组，当找到第一个大写字符时，将它替换为第二个字符串中的第一个字符（＆＃34; good4you＆＃34;），直到下一个大写字符，你将只是＆＃34 ;子＆＃34;第一串......
如何应用您在此处回答的CSS Adding hover CSS attributes via jQuery/Javascript

希望我能给你一些想法：）

Answer 3

也许这会有所帮助：

var doc = document, bod = doc.body;
function E(e){
  return doc.getElementById(e);
}
function inArray(value, array){
  for(var i=0,l=array.length; i<l; i++){
    if(array[i] === value){
      return true;
    }
  }
  return false;
}
function wow(string, outputElement, beforeArray, afterArray){
  var s = string.split('');
  for(var i=0,l=s.length; i<l; i++){
    (function(i){
      var sp = doc.creatElement('span'), t = s[i];
      sp.innerHTML = t;
      sp.onmouseover = function(ev){
        var e = ev || event;
        var rt = e.relatedTarget;
        while(rt && rt !== sp){
          rt = rt.parentNode;
        }
        if(rt !== sp && inArray(t, beforeArray) && afterArray[beforeArray.indexOf(t)]){
          sp.innerHTML = afterArray[beforeArray.indexOf(t)];
        }
      }
      sp.onmouseout = function(ev){
        var e = ev || event;
        var rt = e.relatedTarget;
        while(rt && rt !== sp){
          rt = rt.parentNode;
        }
        if(rt !== sp){
          sp.innerHTML = t;
        }
      }
      outputElement.appendChild(sp);
    })(i);
  }
}

我创建的wow功能会自动添加向后兼容的onmouseenter和onmouseleave事件。要设置这些范围的样式，您可以sp.className = 'over'; onmouseover和sp.className = 'default'; onmouseout，并相应地制作CSS。对于个人样式，您必须向wow函数添加更多数组。在sp和this内，onmouseover可能也是onmouseout。

// appends to id='someId'
wow('Just Adding Some Random Text', E('someId'), ['J', 'T'], ['M', 'S']);

如何在悬停时使单词中的每个字母发生变化

3 个答案: