CSS3 过渡帮助

Question

我似乎无法理解这个问题，但我确信它非常简单..

基本上我有一些这样的文字:DJDM，这是我的姓名首字母。我想要做的是，当您将鼠标悬停在其中一个字母上时，全名会使用 CSS3 过渡显示在它旁边。因此，如果您将鼠标悬停在 D 上，您将看到 DanielJDM。

我希望过渡缓慢地移动其余字母，并增加单词其余部分的不透明度，直到完全可见。

我确定有办法做到这一点，但我现在还想不通......

非常感谢您的帮助!谢谢。

Answer 1

这是另一个例子。我没有使用 span 元素，所以 html 较少。除了最低限度的样式之外，也没有任何 css 样式来获得您正在寻找的功能。

http://jsfiddle.net/bGYkB/

html:

<div class="name-container">
    <p>Daniel</p>
    <p>Jiminy</p>
    <p>Daniel</p>
    <p>McLastname</p>
</div>

CSS

.name-container{
    display:block;
    float:left;
}

.name-container p{
    display:block;
    float:left;
    overflow:hidden;
    color:rgba(0,0,0,0);
    width:15px;
    -webkit-transition:all 1s ease;
    -moz-transition:all 1s ease;
}

.name-container p:first-letter{
    color:rgba(0,0,0,1);
}

.name-container p:hover{
    width:80px;
    color:rgba(0,0,0,1);
}