如何扩展文本鼠标悬停 - css3,jQuery,JavaScript

时间:2017-05-31 02:52:16

标签: jquery html5 css3

我正在尝试重新创建hover over slide effect found here,当你将鼠标悬停在d / B上时,它会扩展为d / Binaural,除了我试图将'dsr'扩展为'深种子记录'

我的问题是我可以单独使用CSS3和HTML5吗?或者我必须使用jQuery吗? 我正在尝试将它用于我正在建造的方形空间网站,如果这有任何区别,我认为它不会重新;必要的代码。

如果有人能帮助解决所需的代码真的很棒,那我就是一个初学者。

1 个答案:

答案 0 :(得分:0)

这可以使用CSS过渡来完成:

CSS

    <style>
       .b:hover .revelator{
        width:100px;
    }

    .revelator{
        display:inline-block;
        transition: width 0.5s cubic-bezier(0.455, 0.03, 0.515, 0.955); 
        width:0;
        overflow:hidden;
        vertical-align:top;
    }
    </style>

HTML

<span class="b">/B<span class="revelator">inaural</span></span>

完成所有魔术的代码是过渡:宽度0.5s cubic-bezier(0.455,0.0,0.515,0.955)

当然,除了悬停效果之外,此代码没有任何样式。

希望这有帮助。

祝你好运!