javascript - How to make each letter in word change on hover - Stack Overflow

admin管理员组

文章数量:1417442

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?

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?

• javascript
• jquery
• html
• css

Share Improve this question Follow edited Jun 28, 2014 at 21:32 chridam 104k2626 gold badges243243 silver badges241241 bronze badges asked Jun 28, 2014 at 21:29 YaxlatYaxlat 84322 gold badges1111 silver badges2828 bronze badges 6

• 5 You need each letter in a separate span. github./davatron5000/Lettering.js can help do that if you want to automate it. You'd then loop through each span, change the contents, wait a bit, and move onto the next. – Rich Bradshaw Commented Jun 28, 2014 at 21:32
• labs.bigroomstudios./libraries/animo-js – mplungjan Commented Jun 28, 2014 at 21:34
• 4 Shouldn't be very hard to do, here's a simple example -> jsfiddle/y76c5 – adeneo Commented Jun 28, 2014 at 21:45
• 2 What have you tried? SO is for helping with coding problems, not doing all the design and coding for you. – Jukka K. Korpela Commented Jun 28, 2014 at 22:08
• @JukkaK.Korpela Oh I was just wondering how I would go about doing this in the first place. What Rich said about using different span tags was enough to get me going. Sorry if my question didn't make that message clear. Also they may have been something out there that lets me do this in a few lines of code, that I simply didn't know about, so I was checking to see if something like that existed by asking here :) – Yaxlat Commented Jun 28, 2014 at 22:38

 |  Show 1 more ment

3 Answers 3

Sorted by: Reset to default 3

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>

I would go like with this scenario in jquery

• get string lenght(to get indexes of all characters in string)
• get upper case characters and their indexes(A,B,C)
• so you go throught this array, when 1st upper case character is found, replace it with 1st character from 2nd string("good4you"), until the next upper case character, you will just "substring" the 1st string...
• how to apply CSS you have answer here Adding hover CSS attributes via jQuery/Javascript

hope i give you some idea :)

Maybe this will help:

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

The wow function I made creates spans adding their backward patible onmouseenter and onmouseleave Events automatically. To style those spans you could make sp.className = 'over'; onmouseover and sp.className = 'default'; onmouseout, and have the CSS already made accordingly. For individual styling you'll have to add more Arrays to the wow function. sp might as well be this inside onmouseover and onmouseout.

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

本文标签： javascriptHow to make each letter in word change on hoverStack Overflow