在 Chrome 中，将鼠标悬停时嵌套'span'元素'a'元素内的颜色过渡速度比链接的其余部分慢

Question

这是一个非常具体的问题，其他人可能不会经常遇到。我的工作有一个以"Mc"开头的名称，我们有一些网站代码会自动使"Mc"中的"c"变小，因为我们的许多内容创建者经常弄错这一点。代码通过在"c"周围插入一个 span 元素来实现这一点，并附加一个附加到某个样式的类。

在我现在正在工作的网站上，有一个带有名称的链接，应该在悬停时从一种颜色过渡到另一种颜色。问题是这个小"c"的转换速度比"a"元素内字符串的其余部分慢。但是，正如我在标题中所说，这仅在Chrome中存在问题。

我创建了一个简单的jsFiddle来重现这个问题：https://jsfiddle.net/2z07neyL/2/

标记：

<ul>
<li>
<a href="/">Work at M<span class="minyC">c</span>Creary's</a>
</li>
</ul>

造型：

* {
transition: color 0.15s ease, background-color 0.15s ease;
}
li a {
color: white;
}
li a:hover {
color: #bf5700;
}

我对这个很困惑。摆脱缩小代码不是一种选择，删除过渡也不是一种选择。

编辑：当我说我无法删除过渡时，我的意思是我无法专门删除*规则的过渡。该规则涵盖的不仅仅是这一个要素。

编辑2：根据评论，此问题已解决：https://jsfiddle.net/2z07neyL/6/

Answer 1

li a {
color: white;
transition: color 0.15s ease, background-color 0.15s ease;
}
li a:hover {
color: #bf5700;
}

<ul>
<li>
<a href="/">Work at M<span class="minyC">c</span>Creary's</a>
</li>
</ul>

试试这个。 这是一个更新的小提琴链接。斯菲德尔

Answer 2

试试这个CSS：

li a {
transition: color 0.15s ease, background-color 0.15s ease;
}
li a {
color: white;
}
li a:hover {
color: #bf5700;
}

<ul>
<li>
<a href="/">Work at M<span class="minyC">c</span>Creary's</a>
</li>
</ul>

Answer 3

我不确定是什么导致了问题，但我知道如何解决它:) 小提琴：https://jsfiddle.net/beekvang/2z07neyL/4/

$(document).on('mouseover', 'a', function() {
$(this).addClass("trans");
});
$(document).on('mouseout', 'a', function() {
$(this).removeClass("trans");
});

a { color: white; }
.trans {
	transition: color .3s ease;
	will-change: transform;
}
a.trans { color: #bf5700; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li>
<a href="/">Work at M<span class="minyC">c</span>Creary's</a>
</li>
</ul>