css悬停颜色从右侧更改为div的25%

我有一个div元素在里面，我有一些链接。我希望div的颜色在鼠标悬停时不会改变为宽度的全长，而只是div的25%

当我使用悬停属性时，它会改变整个div的颜色。 另外，请建议我应该把我的悬停属性标签-跨度标签或标签

如何在颜色更改期间获得平滑过渡动画

.c-label{
显示：内联块；
文本对齐：左对齐；
}
.云标签{
显示：内联块；
浮动：左；
保证金：5px0；
不透明度：1；
宽度：50%；
线高：1.2；
字体大小：120%；
文本对齐：左对齐；
}
.云标签a{
过渡：均为0.5s；
背景：#000；
边界半径：3px；
颜色：#fff；
显示：块；
字体大小：14px；
填充：7px 20px；
位置：相对位置；
左边距：20px；
文字装饰：无；
过渡：颜色。15s线性；
-webkit过渡：颜色。15s线性；
-moz过渡：颜色。15s线性；
}
.cloud标签a:：before{
内容：“；
显示：块；
边框样式：实心；
边框颜色：透明#138D89透明；
边框宽度：15.2px；
宽度：0px；
左：0px；
位置：绝对位置；
左边距：-29px；
利润上限：-15px；
最高：50%；
}
.cloud标签a:：after{
内容：“；
显示：块；
位置：绝对位置；
宽度：8px；
高度：8px；
背景色：#fff；
边界半径：50%；
最高：50%；
利润上限：-4px；
左：-3px；
}
.云标签：悬停{
背景色：#138D89；
}

不适用于整个宽度，但仅适用于div的25%

您可以为此使用

线性渐变

另外，请建议我应该将我的悬停属性放在哪个标签上-span标签还是a标签

原则上，这不需要额外的标签

如何在颜色更改期间获得平滑过渡动画

悬停时，需要将属性
背景位置
从一侧更改为另一侧（例如，从左到右）

结果

.link{
位置：相对位置；
显示：内联块；
左边距：10px；
填充物：5px10px；
颜色：#fff；
字号：700；
文字装饰：无；
背景：线性梯度（向左，#138D89 25%，#000 25%）向左/135%100%无重复；
过渡：0.3s；
}
.link:悬停{
背景：线性梯度（向左，#138D89 25%，#000 25%）向右/135%100%无重复；
}
.link：：之前{
内容：“；
位置：绝对位置；
排名：0；
右：100%；
右边框：15px实心#138D89；
边框顶部：13px实心透明；
边框底部：15px实心透明；
}
.link：：之后{
内容：“；
位置：绝对位置；
最高：50%；
左：0；
转换：翻译（-50%，-50%）；
宽度：10px；
高度：10px；
框大小：边框框；
背景：#fff；
边界半径：50%；
}

不适用于整个宽度，但仅适用于div的25%

您可以为此使用
线性渐变

另外，请建议我应该将我的悬停属性放在哪个标签上-span标签还是a标签

原则上，这不需要额外的标签

如何在颜色更改期间获得平滑过渡动画

悬停时，需要将属性
背景位置
从一侧更改为另一侧（例如，从左到右）

结果

.link{
位置：相对位置；
显示：内联块；
左边距：10px；
填充物：5px10px；
颜色：#fff；
字号：700；
文字装饰：无；
背景：线性梯度（向左，#138D89 25%，#000 25%）向左/135%100%无重复；
过渡：0.3s；
}
.link:悬停{
背景：线性梯度（向左，#138D89 25%，#000 25%）向右/135%100%无重复；
}
.link：：之前{
内容：“；
位置：绝对位置；
排名：0；
右：100%；
右边框：15px实心#138D89；
边框顶部：13px实心透明；
边框底部：15px实心透明；
}
.link：：之后{
内容：“；
位置：绝对位置；
最高：50%；
左：0；
转换：翻译（-50%，-50%）；
宽度：10px；
高度：10px；
框大小：边框框；
背景：#fff；
边界半径：50%；
}
您希望div的左侧或右侧有25%吗？您希望div的左侧或右侧有25%吗？@subhro，如果答案有帮助，您可以用解决方案标记它：@subhro，如果答案有帮助，您可以用解决方案标记它：