使用 javascript 替换悬停时的文本？

Question

这是我的 fiddle 演示。

是否有任何 javascript 代码可以在悬停时不断更改 'Z'？

例如。当我将鼠标悬停在 Z 上时，它消失，E 从右边占据它的位置，E 向左消失，P 从右边占据它的位置，类似地，这个过程继续形成 Zephyr 这个词。

并且当用户将指针移开时。它应该回到 Z 。

.initials {
    position:absolute;
    background:{color:main color};
    background-image: url("http://static.tumblr.com/lxn1yld/Hnxnxaqya/space.gif");
    color:white;
    margin-top:20px;
    padding-top:20px;
    padding-bottom:20px;
    width:60px;
    text-align:center;
    margin-left:20px;
    font-size:20px;
    letter-spacing:5px;
    box-shadow:0px 2px 3px rgba(0,0,0,.15)
}

Answer 1

可以使用 CSS 动画。你可以看到这个How to move text using CSS animation?.

无需使用JavaScript

Answer 2

看看下面的代码。希望这会帮助你。要 increase/decrease 动画速度，请将 animate 函数的第三个参数更改为您的时间。这里的时间是 ms.

$('.initials').mouseenter(function(){
    for(var i=0; i<5; i++){
        $('.letter:first').delay(500).animate({
                        marginLeft: '-=' + '70'
                    }, 300);
    }    
});

$('.initials').mouseleave(function(){ 
   $('.letter:first').animate({
                    marginLeft: '0'
                }, 1500);    
});

.initials {
    position:absolute;
    background:{color:main color};
    background-image: url("http://static.tumblr.com/lxn1yld/Hnxnxaqya/space.gif");
    color:white;
    padding-top:20px;
    padding-bottom:20px;
    width:60px;
    text-align:center;    
    font-size:20px;
    letter-spacing:5px;
    box-shadow:0px 2px 3px rgba(0,0,0,.15);
    overflow: hidden;
    white-space: nowrap;
}

.letter{
    width:60px; 
    display: inline-block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="initials">
     <div class="letter">Z</div>
     <div class="letter">e</div>
     <div class="letter">p</div>
     <div class="letter">h</div>
     <div class="letter">y</div>
     <div class="letter">r</div>
</div>

JS Fiddle: http://jsfiddle.net/63utadgw/16/

使用 javascript 替换悬停时的文本？

replacing text on hover using javascript?

javascript

css

hover