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

问题描述

问 题

如下图所所示的效果：

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

解决方案

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

结构部分代码

                <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>
                

这篇关于javascript - 鼠标悬停，文字颜色逐渐改变是怎样实现的？？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！