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

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

结构部分代码

• 首页

  首页

• 工作经历

  工作经历

• 个人技能

  个人技能

• 我的作品

  我的作品

• 联系我

  联系我

样式部分代码：

.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%}

我自己重新试了下，还是不知道怎样解决，按照你之前的提示，我在外面加了个空盒子。但是，标签里包裹的标签的宽度并没有被它的内容撑开，我不想给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%}

修改后结构部分代码：

• 首页

  首页