html - 在 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;
}

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

编辑:当我说我不能删除过渡时，我的意思是我不能专门为 * 规则删除过渡。该规则涵盖的不止这个元素。

EDIT2:这个问题已经解决，根据评论: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>

试试这个。这是更新的 fiddle 链接.. jsfiddle