鼠标悬停，文字颜色逐渐改变是怎样实现的？？

Question

鼠标悬停后，文字和下面的进度条颜色都逐渐改变。新人求教，求大神指导，麻烦通俗一点，谢谢啦。^_^

Answer 1

出现的效果是每次走到最后一个字的时候都会卡一下，和下面进度条不是同步的

结构部分代码

                <ul class="nav">

                    <li>

                        <div class="item">

                            <a>首页</a>

                            <a class="mask">首页</a>    

                        </div>

                    </li>

                    <li>

                        <div class="item">

                            <a>工作经历</a>

                            <a class="mask">工作经历</a>

                        </div>

                    </li>                    

                    <li>

                        <div class="item">

                            <a>个人技能</a>

                            <a class="mask">个人技能</a>    

                        </div>

                    </li>

                    <li>

                        <div class="item">

                            <a>我的作品</a>

                            <a class="mask">我的作品</a>    

                        </div>    

                    </li>

                    <li>

                        <div class="item">

                            <a>联系我</a>

                            <a class="mask">联系我</a>    

                        </div>

                    </li>

                </ul>

                

                

样式部分代码：

        .nav{float: right;}

        .nav li{display: inline-block;margin: 10px 12px;font-size: 16px;line-height: 40px;}

        .nav .item{position: relative;}

        .nav li a{color: #fff;display: inline-block;}

        .nav .item .mask{width: 0;height:40px;border-bottom:2px solid #00A78E;overflow: hidden;

        position: absolute;left:0;top:0;transition: width .5s;}

        .nav .item .mask{color: #00A78E;}

        .nav li:hover .mask{width:100%}

我自己重新试了下，还是不知道怎样解决，按照你之前的提示，我在外面加了个空盒子。但是，<span>标签里包裹的标签的宽度并没有被它的内容撑开，我不想给a标签设定一个固定宽度，想让它的内容自适应。
修改后样式部分的代码：

        .nav{float: right;}

        .nav li{display: inline-block;margin: 10px 12px;font-size: 16px;line-height: 40px;}

        .nav .item{position: relative;}

        .nav li .mask{width: 0;overflow: hidden;position: absolute;left:0;top:0;transition: width 10s;}

        .nav li a{color: #fff;display: inline-block;}

        .nav .item .mask a{height:40px;border-bottom:2px solid #00A78E;color: #00A78E;}

        .nav li:hover .mask{width:100%}

修改后结构部分代码：

                <ul class="nav">

                    <li>

                        <div class="item">

                            <a>首页</a>

                            <span class="mask"><a>首页</a></span>

                        </div>

                    </li>

                </ul>